{"_id":"@material/mwc-drawer","_rev":"721-a17490a8d34d8b9a924c70f08130fb0e","name":"@material/mwc-drawer","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.6.0":{"name":"@material/mwc-drawer","version":"0.6.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"^1.0.0","@material/mwc-base":"^0.6.0","blocking-elements":"^0.0.2","wicg-inert":"^2.1.0"},"publishConfig":{"access":"public"},"gitHead":"1961a2530cc20bc020bba88f4da76d085ad1f1e0","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.6.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-4qmJVDUHQ1RPW9rwYybPNxIGSFrY1gCNjtOxJiVJFwzOWUS7dsIXQb+0yGF31d0JwCfXy68ToukjdHAhYvYmYw==","shasum":"ec8cbae9af1349037c0c192d5ef3215580069fc9","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.6.0.tgz","fileCount":15,"unpackedSize":276541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+EAYCRA9TVsSAnZWagAAoLQP+wQmdlUIj9x/mAAfAz+3\nVuom+5mw4x4VrDCW5YuXgcJ8qAiBRZStbSA7cKrR2M/pj9jq8vLqEa1vPlrw\nZj4EA5KNXJHeWdRATh5jtQhCb8/Y/RC8MYE3iNw7jakjgm27BTTYuZE4fwTS\nd1pqB8R8xurgAjtZsE8us9vX/OO67tAGHi/6iLdoL2+LIuSK4Suji9353umX\n9sS6rYqba4ZehIF3L9aiLduPgGzcsHQc1utYsoedMK1KfRcimqW283QQnA35\nYtMxSNLQv5dyfZBPMxhNqQccLBJ1mWTtmeC6qXjaQbGq074gUPqpMMT5fj9H\nFXeokmsVc/k8pYYszM4sSAc3pbTlREA5Gk4hCR8Z4umw/HIxTN4oqcrrcAP7\nsy45ni39nL/9Q+XxNJHA0cA1kUxDLRcNunxk3BtXnxDwAbcm8oJr95nVph1l\ngqsbsXZAf2SRQRRNCQWSdqm7tM/3TKcyvYFL1kfOiS+LEIs2mPLO112tHMdd\ncgTqO3CK5L20v6+tWea80uYSU4IuT046Oiq8I/5sZPDwDetCR55rn+XA4O5A\nQSRAie9Owjjv74l6SGfmuusz4cAlBRDuD1qccjpsjmHT/3jNztqoYSFGnlVq\nPXTvbhjsOiR4nMNgoDFcEnz5j0vHbzEC61ACtsB5wJKOjaxJ3Rtzc2dXNjPj\n8rmf\r\n=ent1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAwIr3Uw5atPyl5RoVWWrhL8psPMVILZk68OQ3izpkTTAiEAo9Z/+3kndKU9aqYFhsZz0y/zq/wAVgbA9MjgLpI9t1g="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"azakus","email":"dfreedm2@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.6.0_1559773207948_0.5597450022540635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.0":{"name":"@material/mwc-drawer","version":"0.7.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"^3.0.0","@material/mwc-base":"^0.7.0","blocking-elements":"^0.1.0","wicg-inert":"^2.1.3"},"publishConfig":{"access":"public"},"gitHead":"c8c5d01ad2103af63e3d7656b5d1acc5ccaa05db","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.7.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.14.1/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-dIqxy6b29lJlPuvHrljaPIc/yrgiqo4dzdN/vLExuyol0KQFDJsQrRbrCj1ASTYCB+BoBWGINDu5o+TR8W6z9w==","shasum":"1d655702f928ad330238332ee11087889114edec","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.7.0.tgz","fileCount":16,"unpackedSize":60360,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZZ9aCRA9TVsSAnZWagAAck8P/i8e25SLcHeFGRIruCfk\nR8FCNnJ5Fm/pWMoqWajoHr6yKM0Ow5daIjFtdcbgRC5sSzsfV69kg7PA3qfz\nq+MNo/W6dIXhge0sCpkFWaOPNHp8zYc4DhEVznr0f24c1zR8Kr8evpFmjKTp\nmRzmlmrGiPuzSNvIm99Tj+nZPtKcQV7GimzPKtimBdXDLH4qvRhhUKItChEG\nUGNbhEaJl5wsXyVOx5m+0AuI7vQxZ+i1iT3IvNayvpamSAP8KV0cOAsBIVSu\nG588ZwF1bITXrICGtPLHWbnJLF3rrhX+RiD/E1ZTVkalhtLe0mFsJFmmAyNp\nWslA0ZcQbo78LnAK1fGrOVoSHQXhxnRfCdQ+cZlwtC6UrOqJQkm4SkGtVpdw\nkQjmdgk2ujrvqA3R0m9m5UZsQyXFxAAGrdGllH+aX6bvd+0vot1InQJm9Ru0\nH3TqT6qSuvNNi68oFPDIgE9F/M6XjQ64lI9BcqcZhFJhFgUwVq+9snkBaoqQ\n+HqxcR8al14syNBQpaaM7rzITF4aIN0Evyz9SAnpiEzQZPNWm0gVtqYCd4zO\nn2O/x6NJ70nEFfSw3dOywxSFlod1KHqIBwKvTaOc7nADi5PZmxWhlNVtkkiH\n0CBZ/s0Xgl21HfWd222okbpub4Nh1qL2GmuG8SSid5eXyAxfo1pVHkuuvM7u\n4tXA\r\n=dpb9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDVE1/CzUjw4kGPwHvZ30FUpYg6IpCSYZlWvzZUMnhiVAiAK+bVv5XLyDPz3pt25zLsPrMJREQ93wHzGUwj08CCXZQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.7.0_1566941017836_0.8030336712821828"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.1":{"name":"@material/mwc-drawer","version":"0.7.1","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"^3.0.0","@material/mwc-base":"^0.7.0","blocking-elements":"^0.1.0","wicg-inert":"^2.1.3"},"publishConfig":{"access":"public"},"gitHead":"f8389e38b66e6261a8578f4a748efcb7367da176","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.7.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-A36759aK4qwEUQolmgg91wEx8j/+lMOVMJY7KOVYZCSgFnQB0xCxNMlHgJqE6BuMzqjcIsfcsC8jQkibZK+ruA==","shasum":"ddb8efaec788f4ec009dfccf3fc38e77c3828787","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.7.1.tgz","fileCount":16,"unpackedSize":60345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZezZCRA9TVsSAnZWagAAsmYP/ipDBeF/ob77zZ0SFntv\nkEuKisjuoyDW7nNwV/vmfV+Xkx6R5uRwVjuZBkF/gC2oznC8u2HBaVGm0uE8\n88AMhYmNhBs2t7TbwUuisfb7JWjobvco4TOemQrSVlAlnXcyCbasCB9ykuIB\nF0s2uoqrD5azYlV5J5ZMCanQCT1xFy+p5pUR8qaXS6nlDedoqdeHLXslL7O/\nUJCG9MN68atcZlHrrEBOUoCVfLnfO4B/qKR4pbEfwTW14VKdFAj6SFYBPPyp\nBOusEk8QZFaQEbHxxFsnWx+XjSR/vdeMWGcxfVtPE8cYQ+Cf7FmoXUcBNGcp\ncRXxG5uWtopAzSMzTcqHFnTVp6F8UYt19AoPl5o1fKYw4wNE6+5h6Ob4Y3Zv\niIGJH931TFSk1w1hagR1b/xF2WuKNvSGUMsSJzwXBE+EXiWZqRy86KhAvKhc\nYREH5Tay6QZiTXsJ0CxqropP359Er/DSYDSZKHywXnPCKvjVIxxNPNclR936\nI3pZCFrltmauh6u6l6wzO8PQejlQqL1uNowD+2ylKsT0nPwBpvaGg4f5NBEi\neFJ9+ZCZlr+ayA42uZ+rnl3H3pjEx/KweaCBnQ2AolQSb6tAAOCC8A8c95BF\nI7iw0iLd/uSdzG7wQbAwyDqWGGVLfymcVe7l4iwkGaMmD3hhSiAOfJP90ik5\nn6dt\r\n=H3Ju\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzyU2AjhGq4uWe+Qrc9OEhPUboU+0NPpSwI0h51YGpLAIgN8nyLqEhCaFo7DKh8cw9iNs3GR+LuMfCM6GmuMnI95g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.7.1_1566960856590_0.410842953347865"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.8.0":{"name":"@material/mwc-drawer","version":"0.8.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"^3.0.0","@material/mwc-base":"^0.8.0","blocking-elements":"^0.1.0","tslib":"^1.10.0","wicg-inert":"^2.1.3"},"publishConfig":{"access":"public"},"gitHead":"e47de0d9d6e556ce8c4b0b92f87be25a3e18da79","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.8.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.16.4/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-WX4gzXglV72FM/hhWVXQiWfPgIAFQAtWzv6PqTPV0zNAGU5boDeirKfT3tSfs8PiyiruEuvySJskAdheIPggEw==","shasum":"f20e21b14afc32d151a70d01e0c0cdcbd9ef95a6","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.8.0.tgz","fileCount":16,"unpackedSize":59346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbv+ECRA9TVsSAnZWagAAaaYP/RI7vJtwoOFXwZRx0jIC\ndaTrM7U7sLBoW5QyR8LOj9iCciSekuMp7hDlGueAaHc+oc1dYa62tH9KX+0P\nExxkDt/jEGVQteOFCip9dkdRCk8C1Z6Gof/cZCKA30pk0XHxdDo41PLNBxyW\nZsxklfGwMtBA+mfRsyMjK8n9LKRxKhYVznaseuvuMgAmcdcdBz6jJ5PsGeaw\nW3hCG4zXH+oqcD77u4TSx5eGhjAMeNJ8zMSzTODCSwHKrn1zcsol2M61PSFr\nIpcBuCH6HsZIxZLaUERbOthFknVymlyfGOM3vh2HbUwVp4fiOwxMvBFxw+/4\n0yNd0P2FWCcTTw8QXAm1zjE13kYB/6Jfz7vFxCluRevXDQxXfY5Lc+OHjLj4\nYDrM4U9qo2OiuHSzM4grnEa447vlRi0yMc64XePR+qp84lNMYuryInmaoEgB\nH164gRDfllf+9bBFP01ON30MwzzOndEaLmXgPsdmYvzBV8GJNm7m2aO519eO\nzHiFv3qIun6dXO2UrepJ4Gg6oyi7Lh6XJhu+lK7nIE1k1y4prB1pN3ZzI1ee\nOS6Bm1CzxGMR71+bUSqS3JQzBYbMramAazR+hO6M74V8bLeXHdTxMtzaD35F\neAken0LlVPP2LJdY0W4AVBhf1rHQA4NwmHv5f/PtGdgsw6HqODxK+iyYdawI\nQKbW\r\n=21ca\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDd+oatgV4DEJVTUgVp8d6kJQDAgSbMhi9mwmkMImhHOAIgZRHko2QM8C1/zNI93qnMq5OBps1mFNiIuZbMecibpko="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.8.0_1567555459351_0.4063234675814926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.0":{"name":"@material/mwc-drawer","version":"0.9.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"^3.0.0","@material/mwc-base":"^0.9.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"d6db9ceafe4b21572f967ac4acae9189da8c9c4f","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.9.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-KLZvuwjEg61yeIe613H5ro9CrzzPLR3NDK2srP327U4vC5RbU3jI7fBMJ7aumRQUIJQ9g0ILvCgFOGRBpVMFSA==","shasum":"bfc6198860ec1d822112cf7e5e5b7dd31321c2d7","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.9.0.tgz","fileCount":16,"unpackedSize":59532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjWeICRA9TVsSAnZWagAAzT4P/3TP3vvYrUkk/1IOg8IG\ntjD5OAXJB+QFPUPQX/Eckw2G0FkKHyzS5+WWHbeNKlv6zjdOUiFdb7D9MRrZ\nDoubvXsx3Mw22AMj3is8IrTGFN3CazlphJbpj6r+buspvbg9hPabcbHI4M3o\n5z5yPZ1y/AmHcfQUWCBtKLwyzkvOGpoBStvQIlyVaZeSt8KD+cAgw4Fu6G86\n47ckQHUjxmQ4jDZ/2028tCDji7fD2iXZUyYzP4ED3O/dOE4+QqIkCVsDDJGA\n9coQS536J90Sd3wVYjQcLuVAW9P0bGEuTgBX25uKbW2vem8SXziV/PihL2i/\n5ZReP8kEhhmigHj/bWIwXj0G9sdfmcuiGWfj4jheozby3NECI35aaFcgeckV\nI//GEM0s5Bf13cifVDZZNsf1SS+NIe6MXYqqyuvVOL5POODhNqrmtCjGv8w3\njNjzUWNz8wlt3CAwikT9TDZfh9wQqDXyCi6JNl4dv10351xABEzfvXb1918t\nn3LGJ0UZS0Qtsocx3QNR2HgF6GS/i6Q2u5OxMizda63Zg4G+zOr37Ajvz7PQ\n6jZL/sPIGPUVlDjjA0ffqbdAr0ASvwNLjsxKBnD8yM5yyLAUxY5t2YzJmHUr\n1iHCXxsA1qkbVvBzBV7cEXKA9mV2O1TFGzzJpnJVeG6QX90PCm6U5yLoQWYe\nsgHO\r\n=Poj5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyrub6Us+a0Gc7ijM2KH1QUBij8iHnlt00fD979cqI2gIgTw8hvDcaJNHFzDSX8Uh8Li8wb2UrJwui+aM5ndgUzf4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.9.0_1569548168085_0.5365581341533152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.1":{"name":"@material/mwc-drawer","version":"0.9.1","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=4.0.0-canary.e851d4f40.0","@material/mwc-base":"^0.9.1","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"2b2676d71b8d393aa61348cb8e3d9ed03dd8dc08","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.9.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.16.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-gl8/jncwkbi9F5Ga3nvLq9n51Jb8Vhstfj7d2rv6sXDmmyph57nuhzQ0wgtvwVQXuE5tPcDVf3ioXey9Mim/dA==","shasum":"b63f50cf6b8a9eafa8b51f8014b7e518b8f74433","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.9.1.tgz","fileCount":16,"unpackedSize":59522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkm30CRA9TVsSAnZWagAAzWcP/2eKFZWMI1i/yzXRxqCE\ncGb/UbtxRy8n02DGfyokOZEGpB6xVqMp/hCttuNo5RpUf44IKiKsVuzhe3A+\nMpn5AXn8rkA1fw14/LkuTnqu+/uLJlJmjCfQYMzvgKuMBBxaCiggkofoDHY/\naiTFWLdZ9f7QtzVBTty5VBCdGkBx85acBoqsxGakH7BpJf8Hu5emhWQDFDSX\nQF1ZhflQ27Wu2Ov89YMmTKudPKafJrnkX9JNC6drAuIoFD8UCZAs9Jr7bTF9\n6H46ezu+1x/Xpm668v1xDjoYo7oJH7O5Uu79P3YZuyr+/DkRLbsbg+G6tATi\nvuAmardGY51NZjXXoB/YQVP5FGr3EuIZr8WsZO9tFLvyW/5bp1jOB9bPVEX6\nWA8CnzKHgYjCMlbJzWSZxRj5UfgFgnHdViyUA5VoV0IaTFKHHjut5qmsTOPv\nl1kihn41AtjSlPRPlUUElooWUcZG9K12syapZH39jrmDsqLNy7SBdNF5RXxA\nIDFtcdVeHYuV0dEoJKNXYsv4VqbyrbzdImZHfXy5q4c1kfT/91TJY7lAIEFk\n6j8ZBhGlsltdKCaTIZxwjdVgY6h3Z5w2ZYi7enitCHTBiMuiQFR1iupnRLir\nfwJPqSurme6xmSx+NMJ6YJ/23OLterldkwCYf4L4DeklZurOtt0pQYuM0Q1q\nul0s\r\n=E45K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAiT7dfTFJ+kdAeSbRk45JimP7/0ym0BUWn1Wahz0P8zAiBadfTfeYaQ5OWK7CYR6fQozkWTfBOD4mPm+BHrikQkhg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.9.1_1569877491621_0.1818792583720048"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.10.0":{"name":"@material/mwc-drawer","version":"0.10.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=4.0.0-canary.e851d4f40.0","@material/mwc-base":"^0.10.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"631e70e3a39330ccade8210d1a72edc0f22ddc0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.10.0","_nodeVersion":"12.9.1","_npmVersion":"lerna/3.16.4/node@v12.9.1+x64 (darwin)","dist":{"integrity":"sha512-XViPW/dNtjV/hnmFwA3upj9kXZarwC0r1QxeLkxTyJtz/AgqZraj8YD25jE3IKh1JItiiDI+2WAPASqMcjpsVA==","shasum":"05a9c0cfe1470a94080af6b388d21fc5b31f9609","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.10.0.tgz","fileCount":16,"unpackedSize":59570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoRALCRA9TVsSAnZWagAAtMcP/RFE7pwU4ItRup9jsoKT\nJ5Er7nZM9X5X+7GL7PtoYyFFSiUgilEprwp0ayCrEVSJJAlmMfihEfMT5Cbm\n8+kMfi3pbNybh32TmqCSHLVeBGrWm8aow63lyMwqClqfUvC4ZBxQzOpu1WW8\nD9FHmKUcqwodieIvqQDPI16123x6PEecUD/afTU4E2ojeME/xb6O1ML8Mleg\nZBFG86vty5bWZQqwkzCXKb52Zuc7Co2wLnmt2sVz0eKim33FMI5Qi/GQOKXW\nJwot0U/+H7mOC2FPjR7Nlp96gLb8DZUvTF8lK9jn5+7vTCdDATR0cx/wsqzB\nHwayuViBspR5QKSxRPQaAa4i8HPevgbJuFAVY47jGWYm/hkqjnJdpfShpgGS\nl3Ms/TjF9G5u4n0NCPsV7zm/wGSjRMJpK3TRV6ZnP+PoTw5LfmOs3E7vTwcM\ngVhGPK5K8HXN3mmw+9tuCKyqBHfwFYQxO3XBjBeJbXGeBgsHF0ae2TQnNrS6\nhhf4MAhJ0sJgeLDc3uU9rx1gSyhW9EGMP1lBFUZIfLBdvceRQAyDc2Md6GKs\nf/WAcoIF8sC73A1edMIWA7DaJuSewFO/93i+QALlNvn0QT60aoKg1SzpabEj\n4M1nAjIk5TYb8OvoAsGdN4dtW/EKoaZxtpFUcY36qIb0DdXrGnV24bxgFmzY\nd+mK\r\n=riU6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjGpYSnNrHA0h5WS7r2dH1eFJIo8u0NqaY+q+dkg+4/wIgLY4twKu9fiD18GT3LbY2ttXhuITKdoDt272SpBWPTMc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.10.0_1570836491258_0.4731613652433879"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.0":{"name":"@material/mwc-drawer","version":"0.11.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=5.0.0-canary.5729943ba.0","@material/mwc-base":"^0.11.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"147d9789d99bf7a5ed28f6b066b8db58f5b9ab0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.11.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-KeLhw/od+K4JYvFGbTu+7gs0UO25FeIYGKI+dvUA03ZHR91vPMEmTPwYqoyP98Zy+fem1YPZH7PUsMsaQyS3WQ==","shasum":"4b8a8e6641ddb81673948ab5c68bce21ddbe9922","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.11.0.tgz","fileCount":16,"unpackedSize":60915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Z3mCRA9TVsSAnZWagAAdNUP/RDRpo9HN0xI+pDuUIbY\n0QeTD8D/h2EelypCJoJo8MmZbUXa6FEaCKVUJlejFz52xo3FeKPG1xSlAfPR\nKRyTz3YlI4uvHNVcQhWTR3k4agCaFT3uT5eVyQBkwXqJfAUA4/MEAtFT9V2W\nJWfm5t6RYIM31NBr6mdfpjU9J4VYVabIJdEpTI9xzFGCCsJP2XEYOkgzdSXB\n7vgb5CgA4LG0AEyz81AOjXlUevtVXz9s8QZ25ISnR07rHpa4IZt+XdQbcreN\n6k2EY/SJV7O+FwQ+0NvivOcN0uleCMLSnV/jwWSJFenuTeLeWOm78u2RpDVS\nwNyBM8cnm8hwXVGl05TPtq8PUBBtsGZhbewUyOKDe9b7xZm8eQpgWRnmC/uT\nLbICtFAkNNFwPqxnLUR0dmDOyhVN1KyiP2Tt8vYEV1/z4SzqfNbdpOnzraz2\nFxwalc/M3s+bIrrcrrDZ24WOqOfblk1HKrh5V2Nmj1jSW8MCQX0kx1aB7nLm\n5bn8dwcEF0BdBdCU4sO14CPOixQYz8SJ06oZNwV82NJlI2wS9B9yhIPGMjVP\nOGZHrCQZjHoouauUoOkywfszWImhCChlWG+EHLJyBpFv3wraK9plH3D6sG7x\nwFhXqHbALiwkMJjfClvhCxwRdAAhoh8wAX7zrBj9qcXqPSX+Y/XCDZck3NvW\ngbbe\r\n=HpIZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFEn+s+hjcwCq6bWRKPD3sJhkhX8RBBhAVOuRJ4/OttuAiASpt+rMXxVZewPWBn9cLKAI9+bto96qnlp+nVdyCXE4w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.11.0_1574804966230_0.803071673125618"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.1":{"name":"@material/mwc-drawer","version":"0.11.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=5.0.0-canary.5729943ba.0","@material/mwc-base":"^0.11.1","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"395c02244bf15c2658cb110eb405ff2e4c0477fc","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.11.1","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-Z+vKX5qtuzQWov54OnMMfaFDa454XjdYP0Ydu7ZFe4LcAZfG9NgF2o2/d7f74vwKFqXK+v0ykAiQvH84od907Q==","shasum":"106ca5a58cdcf8f8ab1ac01f41205aac47540c9e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.11.1.tgz","fileCount":16,"unpackedSize":60915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3cK2CRA9TVsSAnZWagAASTYP/1ydnQYRlTKFfWvtsEzM\ng0Rzl8teff99Wug0qOKkGYGdBhBvNIlDpAeD/ioWxsWtfqiYiDgME2QJiJ7A\nNVbn5/kdxEQVqdejLqWC2tF3+rTo4S9lZXiXdxqzTuq0xUHZ5qLGJyqoeBKU\nRGaGngvD7gxhoUOTp5IS3F4CKzyVdV7BWAc9mjRxPE7zCk1uVcwowGUPf1nc\nyIPlTqs/YJ3xxbGehNmB7N9m7Pwq8sX9AbSpVZy9WfbEKXsR/uG25t6dK7iw\nZ3v8KJ4uxvX1e1tDUFt4BGpakkJJ45aOVf7dxHzpimPVlmGax1dk4EsKibpb\njVxwcoqdQFQJzTI+W7+uO7/WlHhq0xHnanSSQpC7d8Qstvt/VxEcmutyidDV\nUtpbvftumh60Wbs5pB/z/1ly57LLiitKh5WI4A4X4fy6g48viMr0VrgkRwGb\nOxchT2Kj9Akh9hWFrz7flj1+rP7PxdHQg9LYXISRys5ZIoK+gSbGofcJDuCC\n0y2n1yil/U/enIuCDEWOS06cLgyuMcxdHUY2Npjk+2Ywp6QhB36U93TFMDT9\neC+JGXH3JjYoKrHxEgGGxUW7UojcMWXe7mOyALuE9DDcGPvhMynEno6fEGmm\nbDBKcw72AvX5HggZr6LIwWD3sKCAnSbzZsVSxPE0m1qLr8EZTH8OZ3MvAuVP\n6r8a\r\n=LfR9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxPZMpJBTNTaR/gvs7rxxEWwsxnv4gebGj6xW/jljTqQIhAPu/6+XJTtkG+87fCm4JAXudg6qf7dWZT6lnqA0vgsdq"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.11.1_1574814389734_0.8594030749215009"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.12.0":{"name":"@material/mwc-drawer","version":"0.12.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=5.0.0-canary.1c494e567.0","@material/mwc-base":"^0.12.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"4c0dc16b89066f24fca4efcf78c36c87657f0a03","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.12.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.18.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-YW9RAjXfv+wpA2LiXGLpbAihB3syKXHfxmieUivqb+zWiJFCuPWfc+X+D7XOY2b1DTEqJlzqBlLLab7nGGNh5A==","shasum":"a4af76585c81bf0f6492d11c876cc79fb5c4fd1d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.12.0.tgz","fileCount":16,"unpackedSize":60915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+WkjCRA9TVsSAnZWagAAy9AQAJ97jl7duf2KjqcebLkm\nnz+/jaU9njMYp/fI7G9ZP0kgl0x7CIpoM0GYC0a/rOT0a9jKus05XxxQlwEe\nSlD47lbxyl1r320QjpANPDVd3PXqKnE4SvHGNZhqjbxiFKtvWsXU+n5PODx5\nDARyp4IO8qTeUIHVJ7SAfEfk/4M+FBjcmi/cKZD7m1Y1RCuaoDRyVZf694N9\nIR7av03B2tlwywpnD3z4pHOwu/qyqOvgf0GZOr+wIbLf9B+yWnVW8vOAkOFi\nh/RseHndH0q0OPArsjzTov23mfb6M958YpbimlH/MsLQtrGySnrcARehs5jA\n5jB8rcya/5gNtNnwr3HQLaqt4/RsXIe8ld+tt7SYMVxfXuCWo1zFcJRLHjKq\nTtex+tAwNvpvZD92OHXp0Ofonx7twrwjzR6dxveIP2zZuqueqLPJP9Y6ja3V\n+hAUUTXuvGSeOkM4DDHwEW/HfWftZ228g13Y+02QbWgf2cyZA6eYtYKCJpVi\nye2QFiu/rWSGRO8Pk1pFGPTYN1FifLX/fsHt7c2tIFW9tTDM2v29P3sKo/cg\nxCc0XGyw0AgNf95Obh5bIy9CGV5xDy8bEsdTxlN2LhehdtFGmiU9iSlH6Jnf\nJIL1t6LF5Wuv95ig0r3UJuXGg+lPTXj8YwFFVwhmWKnz1gp51auMuYruVzT2\n0xo3\r\n=Cg2h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZ5CbZ4cSoRBUbevK3m3KWBh7sCBnXWAqiCO3PuUWZbAIgCLInkuh3JZsGdwPhy0jW7gbVcAK/A/tlwlyY9BHBfz8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.12.0_1576626467044_0.2773828836110446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.13.0":{"name":"@material/mwc-drawer","version":"0.13.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=5.0.0-canary.a1a0deb3e.0","@material/mwc-base":"^0.13.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"054d0d234704a274e8aaf7d8a8a0399f525914eb","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-B9k/8dtqbncBuPyxGQE27J4N6GXh/orSaZqMXHumaxyk8dD1g3G0gFF7ZefKZj0grrG5ZER/lcHek3lZz1IMuA==","shasum":"a08e3d73fd95c94c95d88e3d1a8a003961d82a28","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.13.0.tgz","fileCount":16,"unpackedSize":60831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPckCRA9TVsSAnZWagAAdcoP/0fC2+HQPpYpD7WxMnfX\nRbWlpUMKoDHlkYpqdM/zCGyLF/Co8Z1Bjj97vBEQRZgXBAp9ehdTXjDvL4pf\nuRIUEpVAFbfaM0pNUSgKulYne0Ehfa5E9o5ye3OfDy+xHYaiY2lFW2IV4PSj\n8G3jQrOgEeNYddsDJqLD+Nn2f0JK6ZT8ikgNS+Z7b36xEYb4oAl/3JEORF8s\nTmFZZ4ha+PVGrK+V/zAcKE3TQRnCvWtnks7Ry6iyMZ6p0FmG5c7tzuPj02nI\nEvq+JxJHunRfo/jajCm+2iHxMqGaPvpJzkH5UzuOQta139vrwaq1ZNv2uIyo\n2dAxIj7FZopRYqty5vGAV5NVNopI7FMDxPpB0cIOZoHvYb5wQ8bQ73B8qDnS\n/fCpxmoQWoGvKVs/QeKBOoJmcPkmUEeDDMe5NWuqRxxkDeQDzLvAPCVwQr/t\nbUyrwHS6qDMsIrLVXnnN1jN/lqZH2ZQEdN+I9dQAjqQ5WEfrgdGbGr2hMOoO\nyyT0ZwcFP+1pLwgwVCeB6oPy6nrzpF/FSRV5SAL0kXlznnSoPDh0Jf2gAanO\nTdoOIaOqPsClC7tFiG+5OIgT9hAOpz4aLVgMURJd6zN6VaeDviQnAZSXfs+q\ni97fJwCDHz8CTlfc4etyNUQTJbP3KQQo41b0yJZqDZzEhPIFWjw4b5fPIivi\ncqr0\r\n=8dI7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID9hYa6kpTpLMezS0YCpZRtYBH1DobiADfY2TaDT5yLWAiApXQjbQqmh8NVchwRzFohDNGuTawlBgCLN4gx+JYX7kQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.13.0_1580791588316_0.8618790013765667"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f790f713.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.f790f713.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.781434a92.0","@material/mwc-base":"0.14.0-canary.f790f713.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"4ccf0f734c9b727a925e62b9999d4380351c7936","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-L7tOgp9pgLjfXez2AqGA8cNDdL/Y+YVpND+GesD2B1qD8Wn7uW0TxA+i9+Dfl9TfOcYlKhWmQ8kUc5FB0agh0g==","shasum":"5bd09ab5007f8d013c16c79308bc53d784e318e4","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.f790f713.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHqtCRA9TVsSAnZWagAAtbwP/3/3u2xFhvUhadjuoEtN\nWw7QBFSkjwUapQYdfPxNdeNDZ3n67fQhUgm3dnlgzZxda8QtlbKp+jlwVs5X\nY1DbCdCwHq1hsdroOkvJDnYwb8yIUUJFEG4UZmv0qWF5ChudTzfgDfAd+70Z\nS/H+S7Olvo7Cb4qGgVnD8NxtZCwLnncR/phl5MEj78+xNdC7Qdd0vPgqBDUl\n1DRXLYN3DgCwkE7vboolNX7P1Yd75cvKvivLeus+Nuls7Hu3enpoFvfbMSa2\ndfleHnu97Gf+NKCMQwyg45Jqx5iUdGSelsejXpyxthei+1zguJocrzzROdjv\nMwRan9bgaovq4dZNcpDDWAJNvD8aAHHmd3yU8+8bBscRzm9dqG1zZBgESnrS\nnKw4qrIlYhYdppOkp0yHcvEd4k7LnWLfdT52A9lcbdme59c+bF88ikWuk3GT\n9QrWNL8firQZrf3BMQ61+MIcTwgnTjaeI5fpCx+hply4ac8wiyi37pGPIYxS\no/9EhiFi9S1238NH8X6/QphbmFBF4rElNy0hszAewLYoAdSHGcFk99e4ET01\noZGKiJooTcN5OHzyTqC6MiDc/LrHIpAWkS0CEJme08qg4UcTjhhAFKWZD7bG\nmJ/5svgjnl+J+jAvwiGKb7iNqClrGE+Dq3kA8H57qugrliiQpI1VlahEWOeB\n4Nqb\r\n=FRAY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEBwuTdjg7TjxboMrXeuj9aXy24eWegmbCsGSsyHWrghAiA5xkL8N10E0jFAC86bRhVKwQoRiRhcmGInXeguJwakRQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.f790f713.0_1582856877347_0.23047586179851054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.c759cfbc.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.c759cfbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.c759cfbc.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"e0a8ac49c085c004f390a2995879e67aea1010e7","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-zZZQwF6LNadS6MZfGnor+WsLa/KjWMb27bJmn78cUgUTTW6CxcmKDjVa+1qxFV9Bjptlwqx/Qtmf4j4i8pimMg==","shasum":"ce79a2c15d204934ca4551c6083462a8bd5a2307","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.c759cfbc.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWaqOCRA9TVsSAnZWagAA/ioP/iNno7m0kCqTRqxd8APk\n3u4d9kJCwr7ft33YCSaJD+2IZh6FWyQ329k9HK33/BcyWzkxVDdnL8360bGI\niu1IYDLq+UbW4bHp6Fp7NAS9405uese98sRP9IJCwHveK4hD9iJu4EKCrm3w\npKa6wuFScGDigKY7IhpVpoke3IgraTSTFM3A7fd/zBEGFIGb5/eFy4FQMjQO\n6ghXjTOYBrRKdkYCP1mO7I0YAqbGsbgRVXpv2kmU/qJfMEbYG2Z9lOwLSdv0\nUOxHfUDKovA4OZ/LGUhK8y5N4JsFsNs/6wtWnBCWSOxCAYrNjTJNeMUyhsrF\nyfNeJ7uNSu2MV7fRrVtHa/LOduhKi26IDBECEmnhVu3kK/QpFF3s4Fx2twph\nEn6rgkpLEHo5yTfZfST6ebeN1+ZPAA0vz/m0NT4weyQk+XUKA/mBilHDOMbs\nl/sVTfXucjeikkAhHPBk47L8vVoMgbvmG/HP9savajZPXb9cbxU2U5GRJAi3\nKJW0fIB47NRC3uGd6UOjL6LoojG/wYo+hZCEwM0nveZRY9tVMAmHSKlXLYHT\ncedRSuFXXYNZPKmpmtXKBtn3JcbPEXN6C7UoDpmgQpKsZ5ktcee21ves7VoM\nkbkV8UrXrfD0IsE0SSdKkugHYPLBE5qYTeK2//qt+h/3fqAxuyQ/jFo8JZFk\nuUR6\r\n=upQL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAusyGq+cHo2NaeCP/RW1DHkF4PSNQKSGvpnEyVahhTDAiAC5uzwMFxjKcSP9EYT3YyOyprKrVegdd0p1Bm0dFLGAw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.c759cfbc.0_1582934670549_0.2929968002919101"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.97ef53d8.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.97ef53d8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.97ef53d8.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"c6865476c6b2c4ccebc9f20145aa8fdf93e1252f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-17IpFcX4sgTMgb0id5vajxT33UE2+shiznlKLP5E+/rfrwu/+WDArflYqJ7xKp6gDFoclZ/1V35ealk4hk0p6g==","shasum":"50f5e59ebfeca8be62186a8f6fe05afafe33ef40","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.97ef53d8.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa27CRA9TVsSAnZWagAAgEMP/RxuSHhv0VPLLTseaEgO\nicVSUqPOMiLc/RZSv2SEPkCMjLrRVm0HDZsE48lVXcAHJU6kxCiilrQdI9rj\nN+KgE+AdQ3e4dOENtXMV8MnM0F7o5EOwDoTlB/FPSyJ278owvSEKGDpqJsNO\nf/7+KeabQ95QwkVrQpHyIHXVxEGr/HmvG5Kwx/FOWDkOCsS/MCDlwjs+Qxi8\nwRD1DnygIrO7rBoA9RLIeuN7RNClNoMbNrPMdy3YtlxQHog8B6aNejgI65qz\nJqysPF6ifD3G6E+Km9n2jv3XWVk2/n3j9OTE2HvhtVfqVf7KA5lKkOTGSYp3\npJRdfqg7w/zwPBD1BV0dJGntbGS3/hwmO6F6z8rCcEfaG1/zVIJak4qeH119\nM+HP2+tAQi/CRI5ugMrBCB8I9XwTaO3HOdyZ45xOAIAUz4bEnNQJfwFduUhN\n4tDWPbUAvJgdn8wDzkGo404kLFmAEgP17Fsce4bfuPJ6M06sESlfo3Lw4r15\ncgUy4Cil9JtUBs2HHkuOp8noWzvWLul4o+79YHgc2WjeUSn/GJmsrWyJlAFG\nLweLYCl6wKmnPcfvxpZX/tQmj6IboLHmgS12SpZVSPtUjlvh5jSt2KGa4aIQ\n2wZPNQvfbInRJ2RgRj0MBb+dgey3oc2+ix55pRRnOUMFAYhK2kBEeS5ASBlY\nr18l\r\n=UtLs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3tuIivwWuqwZWFMCxmaIkaLXShAhPvFte8yTNkmX+mwIgYu6Tc/4+urN0WpQp0+8612weIAum5r+c8P7ZCmTT8Nc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.97ef53d8.0_1582935483384_0.9366204676939378"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.24f5fa6e.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.24f5fa6e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.24f5fa6e.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"e884595521a6f82f63b8dec96fc4450410e37a09","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-2+GGK3WkToQZoWh9Nhh8fROhHvcf9GKuT40bwIFqhppcR7iAE/KGSpCH6e8zWyH3P1uyLHpZhPvzuUeJS0jDNw==","shasum":"0fa6631cd4c90acbaceb20b0e7f9951d7dfc5af8","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.24f5fa6e.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbmMCRA9TVsSAnZWagAApd0P/1yxuuhyFqO5MxRnyNKC\nU2QmJW6JeyEwqOlMM6SPDYvRk3mYHlsafSpZ95RR495Efy5VPvz/H0bUhPnk\nFtX+jXjTqdftBZg/ckURjcW6z7hRrs384KX8PWZp9zgXv2/R7BoIgEfUljhT\nCtcytxmDB4N7GzHcQn9aXH+VzcEnaDuQgJexJfUZXl4RlPZw2t9VRGMDiOO3\nR+KdwSTC891hZKeYQ6QetHrkemCmQ01gOWnbRCecdOdm++M/6fsrhhHetFG0\ndssi3eMbG8MvVJCsJrznWovgjbHwR1fitd5SAat7TIrweV73KF+Dpk6RJiFz\nCjjWhMyYfYLPQnhdQTwYFjvaAPVN3M1AK+QMjO+kzJArLPaShIM3eDEaOtnj\nTtNeTOpjw+CeMTznak783/AiqsqQvn/3dRx8z50GqZ5+o4aW8oNfEkhwZE3e\nuef/9r7tkCoVMO9Y3e6ssES6igGL2JTFbrGmLIYEFSL8fbgnDJpJt350P+m9\nf08eHv67ME1XESPstbk15CfFI9u9pD8hoHNZvp7Xjy9bdQXtcccULh7RKtHw\nnyHGASkBLtY1d/cYT1qmfCZiznVGresaPjx6FPVGQRmsuiRzzSXs5VSYM4qn\nJ+uui9F3dDCNMXAiTH+SckjocH3rKKgsqhX/xLcz3o7syCrt9KAFwcc6gC1b\nlUoe\r\n=DXH1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCX64MDA9rQfn8Gh0oj6NdNtvVjYa/MvZcNzPEoFpRzJgIgXugQEPst5TQmU5fJwXgy6GLP1igcu3iGYbH/+hcg4N4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.24f5fa6e.0_1582938508279_0.24323758468300194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.960e214f.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.960e214f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.960e214f.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"9c56e2bea6eda03e423f3f7ba00cf95f684660f2","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-I0mrrymT107jESY6LD4GcVtbmWOksGo7dliq3ZSyrNZ8UTNaXE7EhouO6auu0iDIerT9qFPvjJuRcTaPDx/AVw==","shasum":"e18642a736deb1d8bf11fb0db40297cb280191fc","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.960e214f.0.tgz","fileCount":16,"unpackedSize":66932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdW/CRA9TVsSAnZWagAAPAgP/26zR7Z0jYSDnONOT0AV\nLART3buC/HKwNYIxCBl3TDS5wheJmOLFMjyB2hIzc5hpEELUtuHoO8qm4ILU\nzv0257sISfFSGED0u/TzSIbat4SW2bokW8vfXyegRgslu9OF4H7xORY8UcDe\nNJCs4mW/vM4ujDLyfJxqurbojto/T8xIU8rw+CoMrJFkNMD4TAiN+OVmkKTL\nm/OO5mXX+dmDNH6khIAEIAwpRW5jeWr3oB87tMUi+K3VWV6BQT+GEJw2yv3W\nByjXNr4j5XxOAFO3TW53gtoIn9nXwIYjKVTXAQLfgHBgLZXDu9J057WKxr3i\nn4pY6KIeDe8qKMVBwuIRTkd8kNFLi4O+af9gLYrVKagiG9oUuHoWmgeOUPmn\nh8OhIf+/eR6hY/2CgmQrboUKF1LKhi8UKzQo6AMkEqJ3Yh3UIuOH4FsdFdLh\nh5ElU98nhWvNjzeMErNfdQ9w37fpT/i7RhVigtiizqq1F715IKZSlttnAnmP\nTG4Ce+IXJO7Ynf0mTtetvOANeQdfW3QqNPI8bnFZcHVwfoVbaHyM++0erqFQ\npLy0OPSRkyrWaOXvFUoNwUbcado9kI0lZR1E0ycgH32wje+hLm3Ght/l9CG6\nfOMzQF33y8TplpZlQJsWHRyrEFbcPlmCtICdkjY5PHKC2hW53NHiKQD5Jrln\nLGem\r\n=1wVx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDt8mthO4PknLwy/kS6AtOFtVCYvkgSxWAPhruXk02hkgIgGKHG/PHTPZ/912gJEFzLOjF/cHUeMIK0eERqcmt2DhY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.960e214f.0_1582945726971_0.004566532265126044"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.a2f046f5.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.a2f046f5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.a2f046f5.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"b2845ca1286088f29e79c96b6d5c5367873cce11","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-9xnMzWwCj639V82N6pg2CyVE+RuB1I6XelC8PreDX9rF8yFgKhkDfLJHvpNYKJXsxi/iP/pzbUJetX9C0jF+kg==","shasum":"0d1684b268ec110fc0b2f082020829885772424c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.a2f046f5.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXasyCRA9TVsSAnZWagAA3u4P/jT+BZ/Osj/wshPEzZlD\nmVux9caQlvLM4HJ9XYW3CHi6D00ySVWTH8uBSp02LTZvHaMGdGAOLcMg5HKH\nIzx/Mge5CA5L9ywcrrt3t0EJ4PufVON6oViX/Haw0oduBwkFXsRcx8ItouAX\nSOVGChUy0OsH8fMLrQ7Zr7MI+ePaJwZmzTgQqrW2KKVRTg628wALGsrtQEq/\nri9GIzVp+Eo7YTWy+Aol6vl3NxaVk/SYBEGGgtdGsKkrPSBBfGfcoDr0Nh7t\n8wF9ADMn8Ds7qwSUnyDM1JDinI1rA3xcR7Va6H1Ah6ioxNpCVOv8RKO7WDQK\nQ4uUT/eVKzEyYGMxoieXDo/aqR8/k8VM5rgMVecoDqIbu8jBnJDYIKuP7ct9\nseSg+ckFOCFPyefT7bWww0xo2VeNByZEO4Y2qOLt9/xKeYIGPERPaBzZZxWs\n6fqSUdq6iupe1sFJA0Z3yIXvC8aFBgpEWfUrcc/SSmK16fqRGYaUmf2Lqhwl\ndbRuNyINX4Df2DsJPk+dtpmHSZdXmD7VYePGGvAoFuaj+6TjkSyMCaAghgpo\n4Fx0mdcZQFwLuGISE/rLsN40EUPfNsbI10+EfhYB3q/aLrldJ54tqzzx0qvK\nBKbFq03ukDO9UdWQi4aucdj5ShYhGKAl6/00wFKEv80QZCK1H5vtZeepIIdv\ng67u\r\n=Tk6Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIxyZ5z3QbGkaji3OjjkR0OaD/p5vmsuL0IrnNOHT4+wIgRAXip7+XHo/Am/ZoqozNqy0RGYjh+FnQEX8w2Ro7Ukc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.a2f046f5.0_1583196978033_0.406630039559299"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.024f371a.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.024f371a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.024f371a.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"efde2be2f22a9a7e20f2b0d57c4cddee405ada0b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-WslApmS3TpEUugHHnKTkPtBFW8223Y4kLoF3j1n8jmAlpTyi3zvEiwp1sn3RKcwtIth85ejF/+iL8Ce1V8uqbw==","shasum":"cae5aa006edba670a6bd05b6d58bb73110229958","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.024f371a.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbLCCRA9TVsSAnZWagAAPVsP+gJHk9QVeEmEB97coLZ7\n4IJ6PPM0T4TrZ/PJnlrEiLpFFj0cI5HO6xyOJwyT1MgaQO4v4cKQtJNpnyMv\nw2Y3FartjySiHXoSIU9QzoEiAUDJ9SXT5fhgzF+W6GhUYsxr2h7rGWb+4sDl\n2/aOgbHfUvhcSf5o14wk/tTIyC8DOXJwe3we+IPSWkwfUXzcTxAGyRmrUsbp\nf+NzgrTy3xm2CG6brA+rHw373XLMrntF6TFfB9u/ZRiNmvlMFuwAKcN4n1aL\n+I+4Wm+ZhFdC9rKvQUHf2E+0V6Y5rZRO1haMdr/uzILFhviRk46Y+cXxHxxz\n+VD/crmpRhjPXOGX9pzBh5GiwA8veGbnx8YlMHsKbDIN0K7QRv87bHu7hWQ4\n7Werrx89aH5eQurxb6nSo7Kq4ZCVzG27M+gzLWOivvnoEhsK67zXppvwJ3bJ\n+lyEaFZ7YXt599Gn+WqJT5zpECiXnmC19oLw+X5EW6JemY6IshMbOJfEWAiY\nu1JADh6V5BczOtDRpuE+EV+uvCqGKs4Bi7Auuijj3Q4JvvgSHnKegsWZk+P3\nAGMzWhZArkec4nb6Kwfv5+8tvCtzGaapm++B7UBAwIbreaLF63ivWlOuPl+A\nyeSDNLUXqX3gr6prvZLGk3YqJDgxUleV/qk+j930nBDB1iSemwwxyvoux0lr\nmAt2\r\n=CsUO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpJJ7WRT6myGx9xWNUqIXRTIlpNovU06RvcJDw1mmtGgIgFsL4vMBb5HHmqK2cdv/yNHnebxg/XTRX3yuoY30GNfE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.024f371a.0_1583198914444_0.7625102252949938"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2f164110.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.2f164110.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.9372e4939.0","@material/mwc-base":"0.14.0-canary.2f164110.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"288331a2ec51b59facb4791d01e4d2ba8f4b7cc0","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-C/elsNYAhiHP/0PzqjD/B2py5Ai8cRF4C9MibYsqLuLKkciZnLJC6XWMd5l8FMIBYxTbmq6nw4HzzmyIuXF9mA==","shasum":"d688a215044ae615edec8025543749a498d3cb57","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.2f164110.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs0qCRA9TVsSAnZWagAA5BwP/ja/Lw50IssWZ9qQK7nR\nO6oHVtz6WrLCau7FGIIWD+QtNakeTf0huCSoTUhkTFLs4LtJyINhPtzhVXVd\nPJrmg2w/uL4LP520VkL4JTE6+zA99kDUcxNM1f0SxjdpMVZGAo5RdfI31vkA\nUeGrK/JTTterZH44OZfpuSIwr7NWLC5J1LYvi2spnR+0gFaCueevToRqVeKG\nJMnZaEcyb7A/umdDMJced0tc/CxSAGV8SBfojDFdnaurvkX2GQA+cLz5tZbi\nk8OxE6DoEgpgP25pOta8HilFpcPl0bezs7dLPx3pVu+3Ou9zGjRkKWfM3U2w\nky4NjmSqOSLDyYrpbOfOh+nkdqT5gY8U+ANBOiRKGsyc74RtsHpT/hpgoLPq\nLMT0jNAbDfgVZ8cOVxlUmd0Kmv1uLt6OERZgx2GJ1+nVmM7LgHmKQfg4rrBa\n/ANZCnR/O1xpgeU/aWWtAGWGJqDFaxkwu3ba4R2ybOOIfidLpLvllF8WhcgS\niE0RfCO7xSZLZh84h30u5mJDV4Ecr1LPp0SDXMbQqqox/3uTtxuT3ppVGWIt\nJxXgREjoMjBd8uVE8/1TQ5n3dqOp8r6GzjwIqGD5F1w54iapapSpRKUDKvOl\nzWS6dVu8XeDJwlo+nTZHJO6v5Jbt2K+VEy9Y0t6h/5hIQwc5owLAn8dbThDz\nuE8J\r\n=fOAl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCG65OFpS9zl13MYVXK2lKO28Hkp83xF35/xzdAOp4J4gIgJKl4LrnqDGTGe4iYIB/tE8CFhAofjQJDMe6mel8jx7A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.2f164110.0_1583271209651_0.1021442148798899"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.edd465cd.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.edd465cd.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.edd465cd.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"3954ee24dd2fd1d9171cd7a967586e7d2b34ae38","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-X6jr+NsL2frq+wpnXL3RCGgNt7eRYyVwhYlns86e30OGS5iiEtt5PiXGbNVcAP2FafGJdjIJCLUIi0qIsP30Hw==","shasum":"2890d0008d07830f8fb9009760cd94ba9d2c3bfa","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.edd465cd.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvHzCRA9TVsSAnZWagAA6PcQAIVtTt3e/1b3udHNgBGX\nuWsmNtQB+6JdGZWs2xdsnTjQAagbR7Ph9EXOXDZ25TbkCmCdwMGf5nDSvM2U\nht9irBRV4Rwfr1zq3r3/6wzTfqo+2Mkjs9Zg9Ef1rIH8PrEF5QznDOg9Uv1Y\noHozoD3Z2NpaGnYa1IeFGnhnIuR17AK8biQ6mPHbSNh2v3OXtFUD0fIkqbUe\nqxhaGqUNzXlAUm30LLUAU+lfEgexQ3Lb+Wd3cQ2BeS/djzGqkCR9mEQtYOh8\nXdveuGy3zxxrdnXdVwJJjwQjAKRdlOgh6+GchjGME1xxKOSegKnsVcWI6vCh\njt1fYofl6WZ8Q2AMcNOmGE4H4LToFVuN2VAheUvcCDxc4AnHVyp7mlp+n/gS\nbtBBVh2sAuyLsqB4AT5qP3vDNS61JI0694Hj1wUl6/C0iWNgxbtKukjz6f3o\nxHV1AyBC+IVd9yngvw6Ow2c0MPd2vSglKuMWiZ38uTPgp/fPDjOkKWvZ7nQL\nfdGTP+falzhkjFF7I/fVd46xqS54NQVL252fesNQ78vXaABCGsoDIgEBV3wB\n9xWJsWeW9jGwpvmwvNSfz1rZzlpOsSRJI7ExE9XWHzSPZLTTaLeYO7DCbSAp\nodcFZj6HDZ4qyVzXJFa83fvyCLm0XFoFgmU+VoYJWcDBGHDSlYL252X8bZEh\ni6us\r\n=wCV2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHF4p7ShVd+gAxLBLTnzB+jWaHEdhnj6I+mWTFQc4c9tAiAbsnmKDMFPsZSVcZ/K7y17RoMEpMh0oS7i8tANS3znAQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.edd465cd.0_1583280626977_0.5107003746333989"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2b02d017.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.2b02d017.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.2b02d017.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"2f2999d0bc0326feb2bf856866fd9238c59ca246","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JceLsVXzjzukoDqe6Liuniq2dnKbXqtxAf82hRZUyRuy2PBL/5eqoLJxkr5+6CJwHeITbbZyuodvnoeToIHgBA==","shasum":"f88a4244953747ab49188cec79023922f0ef1de7","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.2b02d017.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA0sCRA9TVsSAnZWagAAAd0P/2xZUa4rx3Vvpq4yTa+8\nY3FoWrf1GmBgx7v+4FPt3G8o163pLtTxlTEPsMrRLw+uWG7Twte9xtHDIyQ1\nM/FbqibNvt5Nitdw66nmXbv9VxBapazPIaAE5B9VKgVWoBmk6f7rdnN992EZ\nzZjfp2yfSNR0VSpbngpXoCmzYecA8JZQ6o18lOGumqVuvb3nUZvneQ3lOcz9\n9aZ1YPuta8ai529moy9wTfKPExCUp5zkAUdx+Y0jIb75O6Q9LGT8D+m5ZlDY\nGlxBO459sdH0zckoTxwwg+QnV7YAKXwODShHuPXFr9FWfkxOkwyfKMRpuumM\nEaYE35VeUELfe8OHrRWB7BEYIve7fBJmUV/jnPgA6p7PFGjGOE8sqdro9H4d\nENPXjPZUDuTTm6lkPzlSX/sPY9MCgOJfLDoSEek3BzJfdA6yslkEjNWZoSf2\nL13jG00NOlau5fSGzkmPEmNIrSi/vdzbLWpYnPe+nJ0PNCWO3We7MtiVQDIp\nHtoj0p1tNmo6lBqlxukxgkVZFDo76VweaJKGKaYyNggjJsRbb5kRJRY9YDQ7\nTuk3yXj6ftMtsS4sR5w4/YYjYGLeY+YwEXmEZdolP0fiB71x3BlXNL9CWTZI\nhn4TbsZORgIuhggKZ6bVbiLbycGiCNUfSuuZOUdlq70NKud5CbINeQVNEWW2\nJhPp\r\n=NWd0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC/Yxf89pL+Hh9JSGbDXWVi1jvCnBO1rVCTfM4+v+tq3AiAyAt6LbGQQVD4RtNSbl1PNnVMA4fjKQ9DKEzNfy2CCbQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.2b02d017.0_1583353131742_0.5955891344605475"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.cbdfe453.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.cbdfe453.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.3657f8863.0","@material/mwc-base":"0.14.0-canary.cbdfe453.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"473c76376428d49a6811e677bf7e1450ef90b5cb","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-NxJEGQ9hvBQC1aotoBOd1WUK7QDdgzag3wzmogMKwS55TAPxdf2YUDD0j2xREKZVcvGQgQY9OpozT7uB/cfUuQ==","shasum":"a8f387d5b9296eb9ee8dde6496b274e600641bfe","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.cbdfe453.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCEwCRA9TVsSAnZWagAAOosP/iGSxv3I+q+9F+bCairV\nd3lpQL12tyK3GNy/sGqbn9fLKVDzio3cfjZnR9f40JDUNsSR7LWUOa1fxZY9\nZrtxEF63+Sw8xTxVf3JlGSwiaIbPgvnm5URr4vc4eXcYf2jWpa6s96cJoVMQ\nwHu+hQuObTas4kj7xnEnrCUovsfjtWpNuvGjH7GVZEAZPlGMXQafX3UWjxYY\nCq0Ctb1m9bl0Dx2bbOnycF4IHtCUpbdF8AODhdJ0b79HPXC+/QZqsxNtKETS\nb1kGGooym26LTrkOS/lTgLESMpL1EBpg1/jbSc+HDn9wtN2QZ3L4j2xjP2IW\n9J/wFh2BFgEjtGxN4tRkhpg2wHAaObqxfUDSzkI+k74yjFINx1xjLSdG5RAq\nLdXRoTr4dZt8LXrDOuvXpRbXKAn3um3QmItnH2xU0pcM1h7tdOY+Pa7ruPqH\noFxIAOjnOBaFslNhqJjlbM9SteVx7Q6fSLVE5Kl+zyupXny3vbhVwwvQ/pmQ\nYv4RfXkWc3UWYlhgIRxUxJOMCfQTtNLJRZb8DvBv63MPzvKqSUSqbE9hi7X8\nQKLh/79mknbISukCrNJsE9DlhaCg7mGkEfHJobdQ66RFt9yU55D3LGDAZ74M\nxQZhv7yNX/x4ARa9XYq6Pp8H2PnBgjKTthqO8hDMYnNMifRdw1v6o8N7WiQQ\nRw9R\r\n=te7N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrKNWHjvve9/3r3me2JjpZiNIUR1bbx2TbKyVhctYBRQIgYWBuu58WXblGPTDJ70kaY1h7x0psa6xS+1NBiy3V/14="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.cbdfe453.0_1583358255692_0.31421596913268446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.02aa8a98.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.02aa8a98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.02aa8a98.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"97bedf50cad33662f192490eaffe0e04894aa3c1","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-s2Vs4/ATGdDqSzG8CDU2DpRY9yEVNK0BVQM54AJHgvgZ0mKLMab8QU1i1DXwioD7k3TGdse1z7IU9y4ObQDfFA==","shasum":"c5ef6ef55a8305b0848b75500c4cfb506c597eb8","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.02aa8a98.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtRSCRA9TVsSAnZWagAADO8P/0se2HgP74lG0EHejks6\nv/WDM/FpdpDWDQ7YG1XYUGkwK4o+PQxFGL5sYxcuQNNlXfKKdWKsxQA3RxX8\nHwjuM8NDmnH6Bn0s+g0PjAGf7pPz1m5cBMeT6ENb67nvHDyBSJT+roDNIxPJ\nfdMMPzk6KjbClkWBohRN1MmOvG3vUTuTev1TmbL9MUXFf5DFT2ZtMrprkPqd\nAacVOv1GnRaKuUjHWky2AOmr2PrrPOAWTwoU1B0qc1Ye4dM8k1MyBHMzeSg6\nFdGDs3mnZfgunsA+YWqXPZt2HRl1kG6lV/xbpEEZlaBH90no43SFzNjNol3I\nvkl6SROMZoWg6QnaWiKiYRXbnyQIgNWm8CGaPdzLvGGjeRuTSUEsfZ3iys+1\nzvRJlZwaGbjiehWyhSVe9Sy8Ez+ZwzxkwU3Mo33QCq7iWvILXs0hwZ/+Kovv\ncgMWd4e/DUwvJIKfkyRMbVNGFopRYx/8bLOBap1dcFqfBTLYJ8lIu+RmNRWM\n77ztnmBAh2xLmGTduRN+FLJw7jMrFQ4Ga0OBdSTV9lmoio3V/RnO3Y86wT+4\njSoB6LBTSbRTUrKT9X7V7h1dkgY7hMkwxXd66nn3X3IWiiMON3ZRKKWsQsp0\nKTBmYNb4bd5PqLDLhQ0MqJtMUmqxIs7sXoUZz/JrUdQNdCcPCPljF43PNiDw\niLId\r\n=tHwV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGza6sp53tlk9QP1CudaIFUWVCc2Bp/YDce+iUiViA40AiEAxLTqkh5JhD2rU+B3HTqRAv5+gmAkm8QFOwbkfvsEPUU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.02aa8a98.0_1583535185612_0.43035685726761974"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.7cd5aad6.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.7cd5aad6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.7cd5aad6.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"02d47be94c90a6674486253c11ed001b63502d73","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-+17ca28hKw5dYWMDrVGv24C8a5R+mJ8CV9uCIoTC3tJmz4wvaO5G/s3TrgQ5GrQqG9wtyI2GOdJ/K+6wTwFRsw==","shasum":"78e141255f6d5b426658a221c19053600a97291b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.7cd5aad6.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs8ZCRA9TVsSAnZWagAAFX8P/Ax+9E89tVloMLoyu5cJ\nGdY5HOGp6pGH158UaspF8NL+xKXEczmHMutKRPV8ipakK0nNkX4gAKWZ0Avw\nbt2TBO1KzZQSVwC6No6zuKentOpPahIpkDFdYPdQEvH1VevwWR8f3PmTV6f+\nrhruNO9AvTfZyzlXLEoaeTFzcOVUaEAkNyIVkbhTWCpNC76vyWgvHJgIgTae\nle4AtQyVnDkGWc2XN4FTQGbYKuV7w+iud9G+vKmYoMw3J3cjKYiEFZw+lWbL\nxYmiE2cFX21Y0Njvii/DDwzJwvOsqcKmJ2rxmeoNeDClMCPI0bhOZ+ytFJ18\nbc57U6iy0lDfc30YfPy8k2kLB4CnXsVHwLMFgJv6+eM0oOZYUdkTO0r6Sqo+\nz3Url8Xdodvun92CH6KnVwo4HAyVEGnzqTVCyT9v1aDDGFITr6yk01WOREXD\ngXps2+i9uKFR+ER4G11u0nn6AF7z/IrqdcIEIJvwY+wK5zgESb1QD+byW0X0\nCAaSCBrZULgYw+7IKiNlSL/yaTTG+o5fQ1NdF5Qlra0yaMBiKXY3+IykZgnO\n30jUhG7YKXS8yHFfZBstS/c35mi3m3+Y9TaBkyFYCkvl0WqodwbTYLVvqIyc\ng0Fn/oKhNsb87t/5NX0V7k8QOC4Mz0zFmdmSTj8adTGyUUWj/RBPX3VLABGO\nfpHC\r\n=yo/u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC6837w5tW1FncxnlQT5hACQc+W/5BV+EMUJYGZ0rvzHAiEA72hIyTD5UN/yId1p/mSmQ9K193QSxauraYb5tBIIYNU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.7cd5aad6.0_1583795992908_0.612210237426092"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.3a79dfa6.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.3a79dfa6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.3a79dfa6.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"d8c4d68989d9c1489104002dc0f43cfb89ad0488","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-XPS5dFraXxerkPo8iSil+6xDMAG939qZ8htN9tZ3AwhvuVRWLtG7W+tXDP9FrbPDgDEpUxkUfFJDM5DizroBFQ==","shasum":"6a688af5b457d2285d1aafe37e97359bce9fbda0","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.3a79dfa6.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwG4CRA9TVsSAnZWagAADGYP/24bBaHgN2hhsa1uoDtz\nHi9SX8ez2xi7G55uuuVd95HRqcyoRebNfKmAMhncWl3VPM+V40y0ciAxiO+V\nf6BMVs4tVWtruF2bxu6/345lqLrhBVwM52hiMu09bbZzF7mVVQxfSKGgTk9k\nByVrqK5N+MV6Fe77pVqjYGIz9BsEvPBR5ejCWVsuNS4CoqLiVW9wBMw1Tzs5\nLWYhQUeEyZpZKs0zWDEPpj9hV5WJ4uiTaMWkZglfeCb6QiDD4FqNc0dt4kJW\nyIpot+Cp0y0xIQUHlwctctA7gXpCEzkToX50KbsVnjbxZuW41nZtP2vxDltA\nsQmt1Z3FK4KT15LebUsbUc/m4qo4dNMpBWwa+x9VJbdbtsrm56Q2CIyM5ARG\n2OSyIBJ5gJ2ruZYCcNqLkrvFPh7txrK4Dr9d5pzp947sA53VI23q5Yr4FKBC\npcM+kjdLH7RQD8+EGde4BhVqsVnxT2Zt1CI3i7T+xCdfY1iGsK8gck4PiON4\n3i9XxzKWvd4wJ05ca/SdYHWAWZlqmiGT7mtWCOZtxbw/aph066W1wWi9vArJ\np8Ky5WkqVjPQIAevaIafxDTxQgsvz9z4ZW3oEi9FdXywuDcOvKtXp95M+37m\n9AFhkFaVRiqy0pdlFGqwMAEFmk/FXbce9UsleZqATfsksFLb2PyV30vb7n0n\no549\r\n=ZEeK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjGL0BkiIc+OhgxT9267iwJMz/Ij/MQZ34j0BICT+rZAIgL8TKiOLHDCfMwYy8rrerHEhk7Hev2+Ds2jPH2RI06qs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.3a79dfa6.0_1583808951844_0.719828276379286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.22e0f5c9.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.22e0f5c9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.22e0f5c9.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"ccb096ae11e367b4590851e53c023abbb22d2774","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-8oUepmkCJZby69dVsk+nfdkaHypJPT2Dfl+HEogZ5oHvqa8fyOUAAVwGnIlwe2gagii7T7CHG9jW3SFduoQdCg==","shasum":"bc43400f6b93658e3327827114e5b3265752bdef","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.22e0f5c9.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwKrCRA9TVsSAnZWagAA7AUP/1S8ZquZYhWybyx3AP+M\nHaQL/8ckK578c/jotod8wPpvfpn0IA/cEsqJODewi0FBBmiGxTFAMt0/jXQ8\n2VIPmkff8hdHDx6p3Eb/cLx6t77eC67YvAHqb8cIWu2cmhLmkORsoifKtc2Z\n47iw3GrBikbj33uygWsegSaxyXAIWLtlyVOm6JHbBbUDewHVfkBnnoaSFHnU\nIH8OYL0KskYYZ/cA59wqf0hE0exv8F1S3D2a01ebM95zGJZ860Sa0gPf3zcE\noDJLspRXcuSyQufU/ko7XsyR9QaEJlDlosnW2DSMYV5/PZAfZvRlktkQBQpd\nxl9027lm+cFjbdxbZAW5MWffeSG7S6Cl/ue2NBbVt1mZyjlefRi4VlEifCpl\nvfL+e6ZeGPerX3UA817zoWiNWpNHiJJBnJg5h0iVOqoNVpQyigvHioR/ifY9\niHAHz/vWb19acbqEmSq0JcsAMoJPQT2iMdnAYrwFj7HcHrcKZpztK/jIWm5j\nUeCyfTle6Ydm7JLl8VJXWP6OmKrv55Y1JovXMz4JugFonJhBXV16N3iYxyG8\nwnhhCrbp5jKrQDia0KVtlXHKBzmKMh0E9DhW/cL0HcX21R5EEjSOJVlY8xhB\no4uTYMUF3fVIUaZl8C+SYPSWc9rcxaAYbBqv/SUDFeiRmt/0sTiXiBhcOY3e\nThq5\r\n=f853\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGbpv8xGRIRrN68JrKtverXXR++riWtT4L6KoZ461gYQIgW9eeM3zELqggpqr1wecGKP+EMIvH+yW6R8WXwKqOc9Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.22e0f5c9.0_1583809194769_0.13682425348008231"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f23a1d1b.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.f23a1d1b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.f23a1d1b.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"625010e9abdb8adc901198fa1ebdc99269b946c4","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-oaA27A1wKLWq/VnKdZHSX9Xvkc19o6LKe5ZUHf6UK6gGippRxYn6zwff47iroyDdZ2ti2q/NkUIAbaBclFKNzg==","shasum":"76cd31ee6ca6806810855322c0b451a65de9ce1f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.f23a1d1b.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/7uCRA9TVsSAnZWagAAo/oP/RCEqkCwhCv3cSfsW1ZC\nJHnESk4zD7vffRDxUuuKsKYzB+1J96J6OisjQZJmVQnT5iMWR2Z7TbTiS6Hf\nglRa2FbAyq+hThJ17hUcr6j+PQiGA7L1fE3/H8zA3BYMkRxQ06llSrMooHbc\n1Bktqu6Kiai1Ek8LfWHzC8KhDr4Ljwlr8lOenHfkqmEHLAxJFR5eFxB8Bagr\nGCHY0HnWOR1S3ejDh22/fu0iTqgL6QKm6YeC99391iE9Kp7UQunmNqOY8RAL\nz2osE7fUuIxJZW2MwdbrmHviOmEtCwVZ8WpQkoj7J528K82rncAwLQ4fwykR\nmAzt3any7313zfrZWkk0Kn4l2Ai/gTOH12/iVXCqKJMA1HFdN14zzao8cYZQ\nlVI+COBoaz2sRyMUnpPjZe5VxHNkuf11xdk/ZwhnugS0hYCvjnz1iNJWEaii\nnbfVSSM4yhHn1xCBrspLtDc8V07wC70H1rK2RGMWxuRTHMjkc9P85gMlGEU4\nqpyUVE0pMJYC+8mzHn9I3HTstgsuGXepH8cl+9rokU+RmaUsbAkJZo1Di9EA\nDFeYF0fnJgtR4lC6Ow4xQlWOhtwKKhuseLx2gkcTk+Hr78Ff05JTL5KbFJ0g\nraXg7z0eL5WDTPENdJMWp/UbMrucG9520ioX/xtXGkwGNhsoRl8xU8kZkbga\nj4Iw\r\n=qzAI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCggUtgRygYZfxpBgQ2ayXy3ppVo7rqz1iJkesy6YEesQIhAOHp+glKL4ViYS3HIA9+IewBe2IVHyHhAjiYYV0ggFdf"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.f23a1d1b.0_1583873774133_0.5079837800843703"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.34b2d69a.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.34b2d69a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.34b2d69a.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"b40bf9e324ad010a2ec93cf8677b25b843ad9c46","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-EZmkMnvLr4kG+OTxBFjRuRHIzarzpak7F+qgiMuRYJ6bsAGKQDXytSILYxBLS9cKeWMS/oD7Ig404hbMDMWb0Q==","shasum":"9e590e7eb3713d732a3e7e5515649792561814f0","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.34b2d69a.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaAMzCRA9TVsSAnZWagAAcqYQAIGyMsD0voMJbcp251Tm\nGBfJik5oxHRx3zM5ED+iOyoMWDgfuFlMqXmv+l9fzVKDneyZa6sSc36m+tjQ\nAH2whGi5h6W5ul62AIWedRJMg9hLKWty/6u/2GmW4z60WE0lJBMgN+Djs6G4\nwTKyvqbOG5vJc9hWW/wJNrg0d+VU9jRxes6CyIULKF9DsoN1qyUv7lx5zR0k\nVkYggOl1hykxwE0wMTwzyl1HfxxIequXE1MIHbzaIgA6LdVC26IKtJIsBPts\nTpjUMDF1IbRcHnaljPxMint5iooqOawYUJAVTQdmI86MJBRbebC31mHyt87v\n1uD26vQ74G/R+OEsJG/hJ95NXvwSq9bqRd/7uWqkczyUL3EA7KssbJ0pc3Ig\nNZX3h9u1Y6XulqBLNZsmWR32rmNCOuHdpiKyQ94cgc+UB/S2e97zitRO/8cb\nEHAv1uAnGklz/1pb9O8vBV+wbg/0vu8pC4FoEnQXwPYQ4K0nteC44sly5uhj\nONBa+ANXgdL3PoyqImS8ndap0IoHrjXiKm90ktEmE2a78WcMLXpdKJxCRFFj\neICoTULQsyoZS7VXTMb2Q9pbuT9EAiynSzdi6PD4JkUuiBglm0OcC55kXQng\nh3dpPxZ6QG9F0nYBH7QUsy3VRX/4iN0LS2t7YnHRF+Lykx3meObrjiFjSBwd\n3iOH\r\n=4mrc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPK6cMEYhLNl6WSijHyjq1krBsHE+l8w1WeAdXXUHNmwIhAP8EzxajcJyKxDw8Fkp90xe0woj9czn2NukXs/FggspW"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.34b2d69a.0_1583874866690_0.09002046235987904"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.dc04abe1.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.dc04abe1.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.1db5c9fc8.0","@material/mwc-base":"0.14.0-canary.dc04abe1.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"83603c5af2141bb893dc17dc4ff73baa5dbc7b64","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-/o0/L5EHtj4Ao4AcF9LnMuSsCt16gO64MuOs3O/IrJG/wx7OILMsupSqnfLbkSZv3n7/Y4ULgRr/rnKfwnDCWQ==","shasum":"d117be2fc522e97dbafbc4c4ccc78274053146f1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.dc04abe1.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA5XCRA9TVsSAnZWagAA3BEP/3hWP610O9G64MJz2nHG\njodXDpPyrx0pTqJz2cNZZuU9zJ3di31im7ug9mOkdZ/vdKeCd1zh+3c/BNCd\nvyntXRfN8v4xIPibzRMfUFuoFZQf6jcIb9Uw9rfRXYh+weKzw+O+DN25xWxi\n44kAF1E8UJAkqlhITRqTx3Tt5TCx1zfazSfDUAk4H3PuOiMIXX6eolPSwIup\nklMhXa5nvm9JWUI5x4BLZ3CfIyAXe05mra37Nmy2/V3u/fHX0vlyLWgV4B9u\ndvzHbl8RRmuyH21pWFtGgEqePksrgRmlDLQHtOWh1shmDwiP30iP8GiCLCPY\nU10/rHnXnek7Q0Jx8gvtCnOsizwr+ddRbJc+kjSbxPLn1py00emyTTWrgABn\nOiU4qO+G9Bp385AbafKIOcHtc3KbdvC2cBYQckJy1inLVLqmyvPQjJ15XNZy\nadNXDDo6qrSP0my0KzjY0yNc2z0CACz1GE76RsvGUxYmLeKJFVnm2ts1N3Gv\nJ4rJxyYp6wtsY23fwcEE1z5RR4Eo6rVv/B6a3chLzDFuHg4EWYQ5od5YqWC2\nR7MTW/W39MJQWAhWaExMs419Kb5LpRVYzaMHXWyg1sNmnMuy9QmnHiN411GB\nZTY1OcqePvQ4kHsX82lEn5TtCJRSe+tVpp3FNSsZcMLdg6KX5S7jrvMSqipe\n3fEc\r\n=Q2xo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDbXWuq8ddFDqztJLGJSFBv1LFcPEnWuG7tWRsp1RRFoAiBhKRtsVT6KK1CXb7p4yLWzFulMo5LiUoVtuvH42NtNMw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.dc04abe1.0_1583877718757_0.289915805951245"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.04ccbc88.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.04ccbc88.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.04ccbc88.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"bfcaa800a510585165a925b6961a7e6316f30f57","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-J+GMRVeMrJ3CugnpMTsNlAxlVuIdtG3RMe6ksIgdKrs2+VTBFVO0DO/sbzwhwXr1NZS51JCOh6ZhlF+1noaHAg==","shasum":"795674cde7902bc714c116316117f20e4004dc13","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.04ccbc88.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDIeCRA9TVsSAnZWagAA1BYP/RrnpwOMnm+ll7YNZK9K\nehXQjRuCIcY8vU+VPSdMRfRKqCCauxbzMztmg5fi99PGj9NVC75Ig5bnRnqd\n3FOjJAA9qEWYf4mj7aHqUgfxdGikq8weN759UnyBRBpQZBNw5DFIcJ2xbhXI\nowTIHTv8EAsgPJR2K4nw9StLFonpaRsBqGcWleWNUvgwQiQZQzfJD7UtZSQ7\n+aDkUVHvB0Sb8VTihvpCvNCq6R88VI+YVso6eVeXtHA1UP0m6ToFp5U5Uuew\noZHNFJV5Qku1A5PmoOEhveNdJ/LMwZKBRAZC47pm7EkUZrYKXckO1oW4Wzro\nkoEC3zKgEmeCZCsZk/C/JoY7xFZVIZ4HiA2x+VGXoPpKsdKKN+EuC2d/TB3c\ntXoDGk+apMFeUBH8v9/miaBdc3iZZ0R0AJ3zdNGwXg5eICkHivGhpOZFLD4A\n25wNxcLefdvf6M5KAYDrTmGE5oM/b9Rj+g/Jzlb9bQOTomTWTNDCE4KntL4i\nOlXrOqaQbVkBu4HXCJtCpe2cIUNnYFwsF5u4C7XK2Sag39F5BXptHTnaMBih\nxkFK3UKKfWR2Fzxgu1SxvlMPr4uE77RKZKPmaLincYhayKkJeF6juxwuUxl8\nAPBW7BraVzWqILhdHuil6IUzKL5/vj/8S5Mv2F35FHfbh7Lac/4xKlMMa7ef\nNC1u\r\n=Sqnn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFIr46ySCKqjD+7qk0aBKDhWUhQ+7YFD61LS7Ooq3M56AiB7NUAVS2cpD4ikjqYWZ4St5fSdKNRq93VUd2A5CO9sZQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.04ccbc88.0_1583886877937_0.3499066650305691"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.55338c25.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.55338c25.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.55338c25.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"6251bd82d8c2b37985e6a165d6904180ec7a96e3","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-qOUFEJPmbfxFofVEGjIVaSeyzd6a7iVBwvNSoQ83VEKF2FX25coHvaF2OXmc1CIGh77xZKaY9d2xI3s1A8D93Q==","shasum":"2d0b1ff331d17dfab248519d644b862a49a8c137","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.55338c25.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIWuCRA9TVsSAnZWagAAKZQP/26Z/i0MFAYhFxwRyIet\nejCf1Po3PI5EWwdMb9RCI3NOjPw6psi9MvvBm4ZmbsESbboOw92DVqbHQ0Us\nll8KbZoeKWHBpwKfKUd6uUdP8Aj5WBevUtMYQ1XNrv4kGvBwY9U/xSpIWub0\nhJBqeXSwP9MQvR7SOC2+8dg1CxsHWJ7Z0GZ9VF1tcuDvWvL3pPnClKsVz2Df\nGKG/eFildqZKOHlXTYTLYyD0Yvs6bbt1AGqAAh8eqNZB4j2kNUbRnPuD+6YT\nEKs6ygXpGp75mBjhjEhAZmoOLtoA8DZXnHuLmr6jEelDB85Vf0EqMJeMRmUR\nKFhiaweGOGQiqr1Gua5c3GUWWTL43vw1heAjRI+CFsK1ovPYxl/zfl1FyO30\nFkJ82KF5UNl5ypnEAPBvWNbOVvJoQEmubFOCVUZEZJhQjvKbafDTq6jixuTz\nC2/zRND+IfixgMMELoQHlJ5HzFxFWF2b8S/GfzetdvhkivTnRqnHKzVKXrhH\nGeBDqohTETeiTRl3FYC4nFbz/K4iXvf3ce3HFSaSBG7m/5jUOwFAqe8H+uxo\nBqrjvZ2uTHzy9f5dPM5zGDSmMntl9vDeLBzG7IaD6oM1jhD55vMks+UrvwzJ\nyFToTpGnF4io3FjGJce1rRtXyCnT/fAZZSz5KiUs0J5BpKyJSJwMG79La1x9\n7wLI\r\n=d+/X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMJzC5b7BqbqkqfJCZlAdxyjgxlRJaiJkPGl8yTN4FsQIgdKJcG7zvBAYftPHhjVJEfYpk9vBUuwfNse1B0JJR6Hk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.55338c25.0_1583908270113_0.5027176263874376"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b7e388f3.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.b7e388f3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b7e388f3.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"1ce172712209d5abf28a65e797f46fdddb7ea704","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-/C3hEFXU4SyJ9+N+3S8IvX6R5Gb2nKywMYlHUDhA0OIfa5RD2E4fvK5VnAvLp5sGl6UTMdLiJuHd+csazfdCnQ==","shasum":"df2a33010bb1d1d91b56c5479359f7fc9c73d018","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.b7e388f3.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUfOCRA9TVsSAnZWagAABXEP/A5nrRt5q8YmGgYa2KJ5\nlP+JfZsAJTgkEC5dgt8soN6u3sXHHdhwZxleCdv982ks9mmwpH0lH/axl9vI\nmatR9RQRVaJbk5nbK801WzUZgpi/LfUvp5UwzyTRlZJSJjp2+X6Jff59SopB\nrAHFKvKbppuc3EPDH3tICgKjZO+ugPsQS8BN1j4m97FRcvzTQe0VsgZdvvg0\ny5XGMpsaZLsJfujrlX/r6OpstmtVUU+PAplMWicpO5qSBrBH33KQzeNfKK69\nY2a0/zUioO0o/NSkaQofGSscsFIUvjVp6OVsor5kajlZ3LACrVUDBqON7myc\n0P2kRLBu48IBK7QI6cLcfowVgrWCJzLcOMzOPtCqtAvxcB0OGk0j2eeau5zf\nBNRabS3vdjYyrE3FIE8c+nxedHW3Xh1ikxwbB7Dd+AGdJ0yi7eTbRB0hNVa+\nlIFMkb2xB7k4in9DbLkMh2GNo7YUDtuUhcuH8G1uIniTMKMQEluSs817vUOC\ns0HSkqJqF7AJd4BUOw+uZEUkkkOSv02tWZEpo0A8GL+H6GUsyBeIJirxLveg\nq+L8mJJyzAosQn/J7mzN9mGLgKtSwNdFlWZauw2Uwrh0zOpN3Ah5UHvlRjOn\nElC+jsA9Zt3MWEFcGlrwMqvo0sEd9wGK6DRkVUFF1SbqDw/s9WsiFGWLDlKF\n/Wqx\r\n=3+kA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBuOGlzwJQmcMDer6ee2LOSJsYGSrJ6/JKSj27vi43SwAiBahMp/N9RX26olBa/tFruS0LqTGTXyhOncC8+A6JiCgw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.b7e388f3.0_1583957966084_0.18012250012727704"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b3211481.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.b3211481.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b3211481.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"7b6c73b4ab63cb7701379685a556ece3324d1c22","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-TSV4/9+U9RuLm8Pl55sGIQed+2JoLiq+7ZzmaLLYYnQHtBtIvsoEAySIcvPzl/e4enn45/bCGCQyUs2lQTdVcA==","shasum":"93ff723b5940519ea3568b60742f902a961d7e82","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.b3211481.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUjKCRA9TVsSAnZWagAAkJcP+gIfgJu44VKbg4DWMgKI\nCGda6dJM9UtiT/6GELC3Ef8LiDkXHoNwmALrtAPehgwSw/KYi5wfxSXLD53A\nEcaxenD5tsW2oV9qNFVGAv40vq8Hjous4gYxJfL1/sGOqJddh5wxjjg9fPVq\nIy8UCirzC8++sEWF/9eAqIlWPth0R4cDvzRuFwU5SP5SO9JsYu0Vx6enjOGn\nWJXrvDrZkYyLiAHYw/5VEPlm34bgGmRSbCwxE5zz4ocnSsJx93moYn/mroaz\nmdRF94fEitHBF8eDbD7BIdITh07aVx5UIyaFYcPqP+anyScmXPszkQEULoe2\ncxFHQ+rjG4dfHczOgiSoNrrs/fx/VQYnrXmNNz5+WYNtU5Wu2MS41QMZXn7N\nezUrv3g1i2t81Vsx/u09wGXL7Tgqa0bdJAxkyDygZ9WqSt3X8vy+dj9RfaPQ\nq6uE/ELf8xfHS+46eA9zSN5mP7mI92YOUaJTQx8kRsu5ESEmAUtDIiTSoV2u\nrBF3uJN+Lh4ggy/2eoXk6ZzhwzNAlLFzcNUmzbpZgt29PyGkzqGktpeJcaC8\n6xlLKEpMrPsgMrrOFi4K5t0ZfATOM3UKxyNVxIaMn6jSrcN3OTOlXUXUAlLs\ngxwsJ4dq8a9C+HQ9zdr2banc9QjlAtGVvE1guEV24L4HhfArvlX4+XRDfVbi\neeFr\r\n=IkCE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBRMepK6SE/ZZU4H237s+mOHChhPMJNMfZNPtXdvL4GQIgQhhQX8ffRnFe1G60GL2pYFcvq7gqNqG0F/KmI42GtIE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.b3211481.0_1583958218099_0.772989901579421"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.0b5c7f23.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.0b5c7f23.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.d5808057f.0","@material/mwc-base":"0.14.0-canary.0b5c7f23.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"c142ca8fe1db14da6fd164a99ca71277489f9b16","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-p5ln8SQq0v98hSjGR8uvGqLQdr1ky+xz14l7u5D2B7oknvb1ZiFEJxFyoLGpMxTaNSQ0ZZdyPJ9PdyVhkenTUA==","shasum":"a9017de9981fd3b8b1c6d50be02c9ab831e5d33d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.0b5c7f23.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV3XCRA9TVsSAnZWagAAUGgP/3LoREr/uzyFnI4Auku9\n1DWWQDnl8mjtJwdC5K4c9oOw0biTM2OUAfNDZ5wF6Vyop/d27Rli+UIx6HfZ\n4kkUcIEk6j49HZgh/AK38LYew5Ljx2LvOp8e/pIZSaRsIJXyTdmR71x9KDvn\naMmCQrBQrVB8bM+0JiLRz2yEppu8yDIyW3v5Ea5L/foe8oIs3ldKfujKvA7b\nQa6X0kdwZxA6/d8Ml5OkASf7xIdE5o47Y9Q0ccjfwrgYwM7VIr+4lni/q+oc\nXoUD8C/MSiWGe841oYS9+ywP716xzWuuR+F9wOvkjQJM+FQU6bTnz86Rrnsb\np8ODaEDmvyKMi/fAj8lB7Av9EPxUUYKxzErNms6Wh9oXNtIr4p1fsbnlTEzH\nmJ2JTE/lqyMmkJ2+ZBhJwKAsS2SJMLo3pI1T0v0HMco6PpnVBHfb2Ptrkrw+\nCTju73E6Wrq0YMhJ6DU9YnMxcPGCsQ0J2Jflcxu4oUoc7RZdEOTF3VkNrxDU\nKI+GUFxI+fs5VMOdmI7VUPMEu6KCRBJaIuouw9ZP4AgmP0hdD90XcaFaFzt7\nsKcNMnqoXY4zoEEnePfro/Y2Oj6RWwBiSJDn5IwA96RtnF+KWAS3poGh9kbp\nxSYEzsbyhiqMxfDvLUSWsJHw7jKBN5+k6X5Bq1XYJ1cyes9+KP5QZHSLqTg5\n8wKL\r\n=X4C0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDH6psim9wsZS8uC3216UYJ1407uiclKipmBQJYbSyyoAiAvM9Lkaddv27po9Qt5LcvTHdvFT/C2+TNzydPtITnJrQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.0b5c7f23.0_1583963606652_0.9991933940819286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.6c0f0b27.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.6c0f0b27.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.6c0f0b27.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"642e3027b591cf821c0ef159a9bd31f56677de91","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-EEvJG3UPBRDlEIJmYshwInDoOW5fJ473E42SUI/1ICAaC8GrxsANDWutVyFP1Poa3uZrWLe8+zWd0LeZg7ICxg==","shasum":"71bab8ad858e50ef4b9e16ada374c9e1586f4b73","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.6c0f0b27.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqa7CRA9TVsSAnZWagAAgeAP+QD2yLlyyNVmS8pcukzB\nhP7hY4ELuWbkyWVknk8UAH4EbQIrMClhPtfIPxPq/krz6D0+zBVOlxyvDrsj\n+JmvEVz3zKwCVkBMsJKAUW/BN2UKbx5tjLpNqZR6AQ/5INV4+UAKECTAhKB6\nPQICj9ZiZfd11ETGYNnUkM3yDqyLoXH6yKCYRuVdznfnlKPivVlsTGPag0kS\npDe9cz4ln7bzU9DGAkSAV90a/hLpd6tBLuAscsuws5g9ntqx7HkAZg9iwpkA\n8Z1XUy7GKivTM0iKB0eVmcVSbyRIDmRiS/os1+KQg1jLkQ4T3kNtmoS60Yco\nkhqlm8zehdOoz+35tmRzka+2tdirzPSdmPNZJAeMi3lwwUdmmVzUhWeMvdWc\n9doVR3+zcxRs419HrueVZ8GH61fdXPbYAP4m4DVSbNQ9EA/X1hAUuNnzAfOF\nSK6DDk9zhO2fFlKoTETRsda1X04vaI/uZYJDfvZAARTjX2Pw6dL5vT6lQAT7\nYCLnIUJVWkCH9602T7HxdFc5t06pcqhbPJXbjPde0ApwCO+pN3FFUYkvFGeb\n4vyLK/S6YdTV/LWW8wxEJeaiSsDnkX8UGmTxLnKmrdKflQuVFwuNNLpchXec\n348ToKoONvMwNrKoU+EyPR1OlDOjfgICva/Fd1Z1eS4wew/2fwADs30V18vq\nX8eI\r\n=rTLQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDU1s3gRJZJ/opF9JuA7Lz3Ck3g+j5zPZhpoa64dLYTzQIgb8SbvTPqlPn27PXwXH44jBaMdp/+9d2vPgGhHFPj9AE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.6c0f0b27.0_1584047802894_0.400242043163731"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b6c53425.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.b6c53425.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.b6c53425.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"21e9310c19b1139fef9125fef8610235d0ef0e4b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-vC4tmdhT+GJ8gr5papoXUX+xNgXGVn8/jEYbIhDi42nsMk8wFEx9jV92qbVG0c+AMGBcAiOFPr1eaXWfRRa8gA==","shasum":"9afaef6306cbf30b31ca1104c9325d9d3fece7c2","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.b6c53425.0.tgz","fileCount":16,"unpackedSize":66923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7rnCRA9TVsSAnZWagAA1REP/3Rvt5rsELkW58nZW/cj\nyifCiU4okMOm8G21rVSZMGiVGXMjB2EBZ9fQau1nj2Q5ou0J+QKqzWdJU2Ps\nwvdhjyuSFD/DeD2k8mDpAiwDTRCErThPrTkaM0RX5DgIAgYO27V6xlAaksqU\nTG8xedk17ljhHGPtUevD2gXbcCs9nx2hC0bwBJmfblEs3OdTYs5hV508INFd\nekgym1IHG+/Au7rbyIAGNULUtiBSU9X76rwJMIoe+D2WM/YwHRrk2FeZYOfA\nFk+Ft+Kji0OGmeZdlScp2sh5Qx7eoD1wbUwjHlrOwHl/D+Svtng12XcmYfle\n4hn0m1CpiH1Ii7cBi4Byy1QwV+9nqGR2kP72KBoEoCQjGgB+pVjvGADWgToG\neCbkGsPUWB9gdUMn5pnqrq+0m8a6tbe/OYIBm1TAwHle624gkukbOCSxFeCd\nkOqD0Y5q2xPJYJvW/OzjzNDchLRQGj//KlAS6BwvZkNBRwwsaHNiI3v5tZwb\nZqiwPDcMS8SDBLirXgSnCBaJ8avr45+Rbk4Ufhc2rIpsojvg9LT5g+zs2fOl\nsBDlbhBEnjwoNrovsVDWBmbehsZKQh2H4t+4eVoidDGVNRzCPEkC4cPkKTOk\n5b4PabG+fe1FJylmXdNKdCv7CY0ZOkhju+G4Hv8LJVI2gATJqm4iySJj8uha\noRpk\r\n=Eg5f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHnsqr4jjzkcBTuX/czhl+v7ntN0YiUyVESB/vkNQt7kAiBnAx0h7IFo6j/hN3qIFA3ZPVYkpcgeObxIwqNOkYv7Qg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.b6c53425.0_1584118502982_0.8476422014405613"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.306cabed.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.306cabed.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.306cabed.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"7b07db227ed0e98a8a55068a9460e3969aa14b37","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Hjqz/P0OPuwWzR1bbLSbsFTl0Dmxn3OW/BTWdh5wjo+Ma+SwpBxGBHjmcu2vrtlDHooQgBb71/qoFzoe3Apxqg==","shasum":"1384afb7bdfa0b24572b9c220caa1fda11367f0d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.306cabed.0.tgz","fileCount":16,"unpackedSize":67100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT5lCRA9TVsSAnZWagAA0qUP/iUyy8kTv7eI1BwcxCA7\nN5Q0ShcPCX7fGOJKeaXb7EXdFtASYorXb885Fo0ohNuC0wH/3K7DkJDIqYSp\nompZPad1HjxgJEceAm24dHqCVBQnler0OKCuAhx9EZ2Xy+r+4zOcU05l4DDS\nQocU1DWZpsNncWO8AKBSL6I8HOklGLF1oHY5Z1eZwJmFUo/Fe20r3HBFyxnM\nDb4lgjmbaGzRDRuGA3sOdom++00rHbGOY5EejVRtLjEW9WS0arKtGrPiVDuH\nCZWMV4y/WjlDaT+J+dVVHbqxjIptoAXMSzhH+7ka6l3xu0LP/f3ttnGp8RI3\n5odLcfcn9j8Qwu5b0nhNxo+xp3BbXxXYDCFQClSWGqj4bg1GHBY6iK/FHz4o\ncMsL+OInVooSbjrzTE42dmDvtyHa4+ybOKHX5NBhearTk3/iQAP/8IOerP60\ntII/xt4CI57GGTuUV7Xm8YIpaWzPtlxDJCDd/RnxdnghEHf37DMIUw0lnRYh\nQvTbe8oCSp/BrPMvR87aH+mZyLbQbsafrMU1cTQSx1j27t0crzsG0QLczCxk\n75OwmUEHDQXy9yzjBdKDBNsZGWWD5JJgJ3iVSQ4yl1cugViCWmM0dLsQYc0c\nXapUKayUqPQVluW6QpmzaReKLOnChU50mj7gELDk1jrgvfPikG470IKXYldK\nKiT6\r\n=Ji7Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBGXqOcqHLYkxqInnGqt32Jy5TXWGzEOHVcfB1Aga1suAiANEAk8h8H40t2s0yj2MmfqemTBwybulh2Acawi8n3sUQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.306cabed.0_1584479844953_0.043406905174138144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.4e250cbc.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.4e250cbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.776291ef0.0","@material/mwc-base":"0.14.0-canary.4e250cbc.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"8e0b10a13a5b20d13409bc4bec6f11a4ff757663","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-HSS/pQYsTJv5LgGORdI96680l77Mo8UuYQdUTiUXB/ZOAnAsD4buWRxHRNimIvmiKHCtl/Ca+xKSI1QL8nfMUg==","shasum":"5d6f216655675ada4014d872fdea067567b87704","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.4e250cbc.0.tgz","fileCount":16,"unpackedSize":67100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT/TCRA9TVsSAnZWagAAeDYP/3XvQsY+nfNpzi3HZi+0\nciCRRq1D5Y8C9jz/QAy1ZcPRrvOp6mSwyLt5XHGyCvABJ0WZIo311SdBb7or\n4Bwm16EE5HH7E5bObYE/z4pdzKv2A9eXxwgXRSTiMZ3OT184ca/Y6a1/pK98\npmlhniraqyMxvYpijN8l4sLcvQ+HwrmHifLPSzZ6zBYHBdw097ac/ZCKKqJ0\nA9uCnYlmWbApgFMQF3u8JdmQkGQh12XrP1c624QtcbRBB8IVn7khlT0aq5Hz\n0bEhFKigDQNiDZ7YjHbpMVfrlpzNkRKicNY8TRKO3WPPMi5hF3IS1Gr+AuXo\nOB+UuA+FcLjhqkTpRatPVSttpR18Kxl5lodQPsuqCrLglfuHCitJfF6s/gB9\nfX7dCuy6SP927dtdDoAsXFz7AtzmqK03s9vugCjegfom/t0jE2JGWLG5Fk9H\nNjGGAaS+tRvi4O2EWqwgEaIcClZilMnuHUOaDcyKVUa4aF6MH+ShWGO4CMOS\n7D+NSSS24QNY6e+OkG2hc9ARsDy8jACy0xFbPwIKFlHt1vW5NJFxGRs3ZqGV\n8xJgQ1kJMva0jck4mqMavQ4GnemydZtFpu7ZCILzC3SiN5PThI3G4ilVPxDC\nvG7ZGQcHw0yhytZ2qPu/f9xtsSZoEwENHwWW+AaFyTIuLj1gSEtGwupg9v6M\niBZg\r\n=E8+X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/JzGYuGxeNhfVcaNflu0Y3B6eKNP1poWNE0g5AR+93wIgHQ9hjtP4dBgbj4W36T/66d/hTXwwBXWEikz+SCCtgvQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.4e250cbc.0_1584480211100_0.42859547289210354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.ff82d9ec.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.ff82d9ec.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.ff82d9ec.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"0af402cd2ff3748cfa5f7956ad2211ec9271c83e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-sU0HTZLc9HjAX/qkgqMH2enBoAHZB68uB8ZebAswkLuUWFdXNBjcNpFu6RfLHnbOO4m2DHwP72cmx0r6p5DE8g==","shasum":"611b95c9273c10cfdc57fbd84fa627ad4da28c40","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.ff82d9ec.0.tgz","fileCount":16,"unpackedSize":67100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmYoCRA9TVsSAnZWagAAk88P/0u9EsjZwuYAV8Nzg8Kz\nadxSUTwF9e5ZuLqMU3SlTGi4k+6c38B9mc8GSjkNlkzaNmTIMVfJ0pw7PqDM\nomNftyrYig6MtpEuizNarjZCz7/WXiG7uV6ov6Za1nio/B+FN87VEtL4Vpoa\nSIYctFdNDTuypruOZk30XYU/f/f3XlRGR/2/wPQtXrFMq53AnZvju3OPENaR\nAQ7XEJUyt+mBG0Rr8W2Spwqsrmxw5mM7/0xNpa5y3DXpSws4hQAPMm24wP6D\n9Gfl97WGSrvDKrV4HGkJ18DTs96hQZYlSpZanIEBZiVaycegGF+MjkIM2w40\n9Jkfbl5TMOXIsz527S8yNbFVjwqpuzW8BTeJRGPmgvhr07ZiQ/puAGrCpKOc\nS2IJASr+xlTUo1tCXx/dC1Emzko4Kd3dTn4qnI+zs/XX7yftOpuxETVpOCh+\n1fU9SPoJ+u2D4fUOKk3S+InhaLwFaL9nVwS7GmiAnpB929ZmAhGIDtxFZdnJ\nvsOMr+Iyhm0IP0fvaeV44kkREIV478MPu3HOsjRo+lEFhOOCRfDjBbNGjOCS\nw/3qYENWMdj2md4yDySQNr3sfx97E/ffSUx0WN1vYYzn1Bw2Iy9+sap+N/UH\nOnZNtaaefhssKJcV2MBVD1o3kR3s7khseiczQF2aDYCcJOs4/enZwizhlAAL\nl80m\r\n=IY5b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGePH8OOKTuE6Gqcuz9JYsMcVs3c2pqvsm2jXvN8fTbyAiEAxPudNEWNx7nD3oTUacaKUz89VZA9LL9kXdG+H9UhTUE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.ff82d9ec.0_1584555559825_0.6962858460065324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f50f48ef.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.f50f48ef.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.f50f48ef.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"0c4d2eecbe04ec4e08549650e593ff154b7d7e84","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-aPqf7OcIxbVvfA+jwjzDq65XJClcWJpiulzQnRJ4zDTG9rUwQ6wW4hAfldOdhsjTfue2Hsk/vj5ts3ggAAqaeQ==","shasum":"6dfaf15c7151d9801ad8cf9dbc932e1a519e66aa","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.f50f48ef.0.tgz","fileCount":16,"unpackedSize":67100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8AFCRA9TVsSAnZWagAAI1AQAKO+60q2eJSVzzHkeAQ0\nbxD1vQXCAL6p69hjdnOBVhDdufOPD0wPadroM0yUj76xSgm1O9QKKhScNXUD\nx9OjIZASqqbXYLK0ov1LFsM3ARtIOIEhaMRtcn1szHRvJGWhq98MFWZcGjOP\nx5Mxrv8leeiaPGREycfjROETuWpCsYLVeMXHA7EufLGQhY/c8pV08gBkW5Wb\nAm/+19xHNQkrDtA7yDcUFPFbv48WQi76m8Kskvw7gwHU+fkHZqIF+9ktjGZm\nC7571VDAxYy/kAL0ldOZgW/ruu3fFk/hzz7V4LGQQ8B5oxDHksMHf4PwvQKj\nLhKw3u09IAUOqDRkvNbwJsY09M48WXkc2nnBQnxUHOkCIg2vhkc4yBX7LmQY\nlofkC/77CN1kjV/NolGfE7Rv921a3qN/kGYitWIh3neN6I17oQ0Kn8nTbN8T\nznVCnETw+QPHniMpiQkz79vZJ+k15fmR5L8nXOxlhrchgz1aPoCJUWMXKms8\n2EMB/DqC5QylXX3r0sQNEqOmutFFcj/FrEDgIvteIaNdPr9Qibl9J/qfkIWR\nq9bbnlMPupdoxYElItFsV46QO/NKOrlvMa5rs/cu9tjXAntr5p4ZpbAVdfmC\nG+fZxzAc/TAfF+RCmjn1TbelX9LrJQOwt72gi0Eqo3n/bfTVzWjdsTMsiTKG\nx1vO\r\n=ay5g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNah46iKLlB+c2ccbynzBVI9bpzBNHOmdRxoJrDCY1VgIhAI8uA2NKGuLP3ZQtj71IImX+cuq5Tg+2TdcbnKPjsIFn"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.f50f48ef.0_1584644100968_0.08571696015987529"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.134cf877.0":{"name":"@material/mwc-drawer","version":"0.14.0-canary.134cf877.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.14.0-canary.134cf877.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"c237581285beb5a84c39a5ea15dc95e9a865e057","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-XLDj8NxXgIQLn7xymClVGuYBxaMaYfNnHpHrYno3cvwBGu5RXUjh9HuDwP/kAmvhH5lbsy95I9V6mHbw5AsCwg==","shasum":"3d0803a944c013b2ae156fe0c90b22e02d39d0f6","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0-canary.134cf877.0.tgz","fileCount":16,"unpackedSize":67100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9hgCRA9TVsSAnZWagAATeEP/REGtKK1qaq1ER7+/esO\np6fSyPLYsiA1zfAuA4EqtXIZgD+qds6V6soM4WlAaOz5ijNg6VCHglWHcuII\nD3oGICOyzLXjGNh+tzO1XEzpwxI8G3GvnZnY8wgdnBLTl/4C5B1f/+QVCH7Z\nSGlKo/1Wqljm45zAqL5whECzioaG+peDihvWbZAe28cvHrLtXTcyb2xVFe34\nAjecxEnW0Vy7aHyfJ+9VpTydMD5YXdE7vQ9TLIf/b3J9oB9QmDQfOq42V+s5\nelFUlxb8AvT2aQ5rMWWkykdFdwYaY4MU/vB8bHhDmRmRDMdRNOb664yIxjvk\nwm9WMjytMidm6CCRgvwsnpNg8XqXMoljPHSNwERE/9qzb7OYibTmDrcBMvzC\nSPtraGv+z+sk4njGHHV3fNN00hC8wZVE2Rpc2FonEnXhnECwuATtykdujXQE\n3F4EiI5KpmI3e/2XOJ1lRiv4GjkO8e3ZFNNL70urcH60lKKPayV7n4374LpI\nmuPRFcY8poXx44DUjoDY5ddoKdy1Ot/Akhwd1E1xBQVQxaEL7XLZjld+x7nd\nOFOJftPJLxBAvD+RaRUVHVqwBnBdhM/7yx2Hv1IK5RntLZ+BOBBwT/3WydCk\nfZ3JBS6b1OO0FYxQZ0f0VCWAKrcTXa3xlfexsMDFfVVF4wQ7i4GsjCVmHxXf\nx8x4\r\n=I/YA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEpWlQ53K3mg/CMau0tG2reTn+FQr3TgvY1288qdKdPNAiEA5sJjymofe1aDPUYVkTsQo2e8J9Dla/Ly8gqHvKm2tGY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0-canary.134cf877.0_1584650336341_0.8083518045014073"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-drawer","version":"0.14.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"^0.14.0","blocking-elements":"^0.1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"ac28113f4d46ab2f986ce0aade128eb66d3017c0","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-rFQet9BKdHJDc85yQLNtMMxztY4CmnWXs1tNVW/uQkK5ddixQ0hN/rXiW8QKak6ShPkhqtRw2Kco9YcZ7jSLTA==","shasum":"605988ee36826d11f603168d2ad7e908e58035bd","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.0.tgz","fileCount":16,"unpackedSize":67065,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+P5CRA9TVsSAnZWagAAgEUP/iuzvyXsUvcYFWUA4Yro\n9bmUuFhEPNwj4/jzpamULCuh6JItjYn6TQwJONIzGvqhzPohleuCKhE5xAXd\n9zmTg5l/XHohl1q1Hb+PMqTUsz3m+wCHwvnwCJ6U5HwjJ+oCppogNZRt6Bc6\nooW+MbHX1AwsReAN//vfFty0L+WQUxvnomXN0Zsg+IZrWd5275xJSsRO8bKg\n5m5HnKUDU7iXEA+xreDtT4HQYk22My2hdwe/246lj/n6qQ7F8Mi9JgD9jUmL\negq1CVaRL7CbuiS4pfUKPEYbmhv4bAAUCwPUfIp9QZPmnKoq6yB5Whoqn2Ix\njROv5/4gnW2gb2vdu38F1aKE1WBSBYNg/hiTnQizr/iWb39PNSeOVxVNN1sw\n/EoNrgoYHN9MeKJSvxXv/s3P85sqbTWbIzQ8dYT7KKnEIyzjtfIqXHHAssKK\n/KYKfrv5qG/diNIOmrkJOlKSpyWSSCgmHO0OwpKSuqKZ2LX9OblrZdwsn6R0\nMIe36mLliJswTtdg5HvhkhjfthpgcQ4c/+qAPmrP2bWRB3AVp0dMezpm5Dob\n+Pa/Irs/6Wo9ClpANG9w5a32cbZynTX93ayKgp8I9TpjAMfFHTWn/6Ii2ogC\nL2TSDMRF+Mhg84M/eqglkSGq9bofwbYTnBoPu11vDyjH4n8i8/Ia4KW++vvB\n0dwO\r\n=1bZ/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICeOeAedbGaMWgn7sviebuQIcjPvlcGomUCpiN115szFAiBqaOeBRxsO1k9RSeadJuew/p1jJrGxSD0eusHZ2kJYzA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.0_1584653304843_0.8740232090895099"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2c1a4913.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.2c1a4913.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.15.0-canary.2c1a4913.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"8d9a4fb2b0ac4979d966b16e203b2dd0f388554f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-/r5BEsE5CdsfUpij+4WV4OC4gDUQz0wBqyRigYeVstbyNbOfGQqM2HfPgxjFHaU74MruStJbFc1tmb9h0scErQ==","shasum":"801258c2c4360267417b564a6ea723de456fad07","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.2c1a4913.0.tgz","fileCount":16,"unpackedSize":67100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/mTCRA9TVsSAnZWagAAaXYP/0zHlLTRN8VG4EqCaVWb\nxWOVDopfLOnyaKQK8JLR58d1isPqfyOh2N4Z4y6FuGZOGSHO5+gWBf8wWXKV\nCCRVV5S2SL15mpIrwn0BaRRxUyMbqPUYpxdmo5TIHZJZcOILba/JtjjQBCqa\nH+EFlG7Hv9QTbBza8CPpOByLw5kakJzWtaJDZdIpAl1KZz2LcHAwvIKOoaYt\ncLagbcQY3nclVP1yQkwl8+7AIdNnjRWEZMshxdc15h0ONwENFwOoJ5TqGqo8\n26IAVqaP9F6YN6qlR/HJkF3KNknn0y95OXwhfghaQXbuXAzV6VX9e7D4QCkq\nNQmPlNiJRecekRilCWn1aLDQypeuKNtXq7PnCKNMwVmghAwcynZJVYBhKIWY\n24CQRswsBF+a2Bpm+6JUyu6nJg5vwTnVC/bIoqTGnYK7ltD6kAj1P8I5V2aZ\nCNrJoy/ICThStr77LZiTKma5JxzHYSbJ9eg7Y+9xI61kyfuKtk9R2PBrrrO+\nhcvWQldjchqm1w+y6eel4I/hI3gev4rSDLswGT0A1KDHNMKXdkhnAOChPOxy\nuNhiFKzhuSkbWj5tlq8luWpqPNt+/A7x3SlciY/SmrS2G+9GV3/5w+nsIta7\ng1lxvk6CzLBJrqY1/Bbses2YCWc1cP+304MaZQ0xGPWBg+RuSRjVtwEU3Ryy\nMoBf\r\n=yzas\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEUFxNV5Iovw+y05y3JjIwHoqQ+wlWn0DGT70t7D6l7LAiEAmZiL1eZ9lUAuf2jBLV4MhEDjRloMk3+a1LARxEmZwSs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.2c1a4913.0_1584658834743_0.43547740944519386"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3a6e481a.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.3a6e481a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.cafe18860.0","@material/mwc-base":"0.15.0-canary.3a6e481a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"0d89a3406dea7d2d2540aaeb339072cc01d18e2a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-mshpIMQi+UaF3ho40suRX+Gxrm40i/PPBAaiw8rJXjWhGd256V2web5Ko76tEoRQiQ9mjJPTstBkHdXCfMY2vg==","shasum":"bf34339ed382ee589016c3a44687eb3534232c4a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.3a6e481a.0.tgz","fileCount":16,"unpackedSize":67100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQeVCRA9TVsSAnZWagAAveYP/iJMCAKBhfJMYnhEtPZU\nRY0gfgiitYlW7AxW6pOTGqbDRrYJRh8KaQQeDLugskWC38YVCp2ALqaPqTM+\nv1RfAeBph0ohQwsWIw6bucgNYsIH4aTDvE/WrDNTHZMirtd2E5aEsaFYn2mI\nraYfBJcYD3j6LiNUVR2fsJUx/ZIWWGCsyZdFbrPpbI/ghA3EnKAr890iwcMJ\n5xRF9z+PpqFMCTUB3S2EIOZ+p/mCJ8Vy7uKvzdNqyrXI8EPdiSuFjwa1q+pH\nqfhp68ahgM6FukPr2o0hgLbr8/tbVh7jEUCfn4gQh/66blMsK5sEzbFc/9Ui\nF0yHHVnhB4rP00KKzd9evHt/q6L2Qndbz5ARzrnWcg76j37F5fDn/9lKChjz\nBSpfDMREj5ObsLRsb62TT3SR7ug77cZU27LH+tPrzar5X2UK9f+Fd+V7locF\nI3SzOqdyiH33IXsgTLfMp/zkYgcwq7g+p6WfV1wt5wClqDNzI26bWfCa1fSI\nX0o2tqo+Ic0foyldnDFXBfo9xJqQZLyN7zK3dfPGMka5qUYj5qiOUCGu9ogu\nJ7Sd2LJ+iayLwF/166QVV3nXEd0T9giEXjl7WE0lgmw6B8ni6nPTMAEUR1+4\n/1Y7Bojz935V7uSFDksZcYBsVmcGZuXrCmcS/AJ5ayEI5nu43wdqO+OfXbkK\nUHMP\r\n=8YNK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUp4fDmWmlwLsHp5q6kDEmUtNSwznOJc46wavwl3wlxQIhAMZPpx7ADYWdAJomBjXRE6eOhW3naXjOpK6ARjfecUf+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.3a6e481a.0_1584727956874_0.5046908185485286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.603d6eb3.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.603d6eb3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.603d6eb3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"c12dabbae50536d5adf2b5a785d4a5009e53208f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-M5wBFySwsj2ceTKcYTy7WiL4TLZ3TWVaG3CcdN3sjobnkHj15DO+j2ghBXl+Bp3AEb8Q63dv7fG9gUWofohJQw==","shasum":"64280be3e861777cbca2db47054fd37464e52d43","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.603d6eb3.0.tgz","fileCount":16,"unpackedSize":67100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTciCRA9TVsSAnZWagAAD44P/iU50U89TFvCRnH6vwsC\nvkbHjQxg8QDShydVPmn1p8le6+tUYSEDq1DcQX+m6QWraHImW/hAgPD3R72X\nupitarPGqip+5gSXe8kHGZ3Rp7FipCbblLh31oDH9Va8gBVkqzH+2BRvu9MG\njiutVNyShVfQyXupzFNBeZqx1AtMHqyBPnnuM+wNBI06P5vwGkpo2smBHCc9\ngRehLe10s+Z++awEG0Zg9JgHMlyWN2a6fiGnqjmkJqknVjTmcz0gJy14Pmly\n0XTR2XbvLnSjseLmSA/R4UuzjOJydCUdFgtUlcJwy47O/ozCT8rahGgMdXXY\nm1t90WgWPWNXWBOetb4Q28tdVv3lIEZF01SNdyQfyicIrmaKCTlVEuxHx2jZ\nU3isAvOcwmnSxRXQs5muXx5D1SDtm1H365yuIplzu+GncUVJ4+mXbOHaRf2z\n26UGHi5vWWWjiU3gWq+9wP1qm5u6rgL6Jj56DfU6o23ee0NsSNdnQqcCIbWF\nQZh7nYv4JRqCmW5XaJjgGxVKcicdVXn1rbV4wdzwxyBWfqSgnXN9zDvomtF3\nIGTK10JeEe28Gi/XRixkaYdlAapLl8bXeTkSgvjEGaZ1efaXpJsWf0TKbEbD\n5QsQ38jVQokiF97tC+sarU6thIy+w8U4maAIRjnzZdeT1+fUB3cHQVPoBEEn\n9RKr\r\n=V3yJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTNtPefjOKr+TOCmuZ/8fgaf8+7tCfT1BxO/zRTxtYqQIgFGgnsUBalztiG6bHIBTKo9eZOecAgKtjmRNlrqMhuYQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.603d6eb3.0_1584740130116_0.19547263545927152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.05c6a93c.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.05c6a93c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.05c6a93c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"62ce85b6b0e7c20ae9938ba7b42af970a40f1f00","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-p28Dq8jLh88ovxA/5s3AH9UGvrcjkLizEMMxbbHkeM7t9vEoc74+wLn3DN3nwp7DebmAj5QnbDCUnlf8brMEeQ==","shasum":"06b1de7eef7b1d80dd277f2aaade493169e195cc","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.05c6a93c.0.tgz","fileCount":16,"unpackedSize":67100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOV0CRA9TVsSAnZWagAAMMoP/24J+kzTNk9B2T+GpNKe\nx/uCCVbqdKJLPMcaKjZRII+wvpO//g9RCURGjl1Z9/S8BQED/Lnbi9G5TEpA\nGZrtbWL3zZ7mITnEUYhfaM27U/YZp/G/uPwkeS7eknwOSe4vxprKUm9SuTXC\nmLnvOvjK8+P8O/w7wgAjx5aUxJeJ7efBvIN0qxPSxIicDIDxDCnBwbFxsJTk\nRuux4ixLIR28GDX/5ciy0fTZbP+Z92Sa/4uqYM+svVqW/Z48f5C7ultGGS+5\nwQUSMCXISYmKlhufTq49uumnFiOja5jeFcAQrJn3NykBkIdB0wB1U1q5tbxv\n0nsWRx6GOUkMzgBORtqeZVj8Bx6dXtmRvNOl7uOwtmsdrO+SQ8VwshI4eP5p\nGaJX8AxWZ9UcBaL/Ox6OxPlKpeLuKvh5ohIo2EvOLJDIZKzN57e5Nma4eMXq\nNhCCkHdi4WcIhHiJpdD3GwFKqAr6nR5WhzTz7N1sTlWItIRPbjFijcAbgIGX\nv5b6tga4L3eeBb0EM8Cvt2CEBDTOhSZacOCYvzrsyK3/GOzpAt8D7y9JYnux\nPA/E+5Y05gxcQBcSlbM6mpW+m0YWxwNYGFYnqETpvbAxf9w0QKNBUSTa5yjq\ncBBGEM8DxgCx1Zua6IYUUFZBKJ4kDfb78Nmbu8ZPTEHJrYAI/snrmt5kspNa\ns8o7\r\n=Ou6e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGYzAu0sFmAaHTWggYm3yQqyPDsKKlNPOQmjGyOmX2SqAiEAsPeISzaycBKH6x1x/VfzJDWfnLfLQLAUkeGkl5qd2tA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.05c6a93c.0_1584981364308_0.7798124976327605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-drawer","version":"0.14.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"^0.14.1","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"b0de4ae05c3088b277f5c20ed01e4d684cc6b8b1","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-22wMzrfRTqCcD0McM0CUetCyrDdQue6yMAl3hMZ9vhJ80JDmkT6zGXH3fQF1Lg/B2rlqI05cJtZ3UugSE4wmyw==","shasum":"6dbc605dda683642c6a5d26da12aea606aa9de18","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.14.1.tgz","fileCount":16,"unpackedSize":67065,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePiFCRA9TVsSAnZWagAAFAIP/iMWzc3Ru3XwT/brvAIt\nx/jj/lkh7Wijvf545o71xxJ9bzkGxS6etaRsjHSkBW5d6wNxQczc+TxXVltI\nw5xANySpPyom1dhg8rNwMzhmQ0rBIVbNmCZ9lEhJkTjg4lVrVVA/RJKOcuZ9\nSnEmtwjlfFMJdb0gq317nbuTF4AxT9/sh8pXREGxft2hqFkTKuFRk8pk5rLG\nn1iZxuUrUFfXn3VqrRZNz1VGHO/14SzWLmU77IgLxLo4RWJ/AnX0AE8EjYr5\nP2gck1D+SUvJskNwE/DG+kGAiWr6k9hgVg9mBVfZIvtDoiLzmkMeHm/jH3u5\nfuhQ/iyv4RoUuKvGt78XUr9nv6GH02gPlW57FNdr27b9op09oDaHv+k3qwbb\nxj5rYSKEZI9G2PWFeM+VZhIpoa1eBLkhBy1El6RYUVbbhFwS3ZYh8n/6Z03o\n+tRBlAst1D0KQ9bwxGdqULoSPmfRzLBDYVy03AXolVEuUwXOO9Aqbl3UD9xN\nD8/jVtsrT2onA8EW7NVrytV69DMuh9HaTFCQVN5cuy3zTE+GZTQjuqwrQOCC\n4Njpu71EyO+YvV5WsxWi5s3AGj99ZJ3hAZcsSWfTMpxBPzsOxChaxjFOl2//\nnrgS/oLm3Tt5pg8iDXR6ggmCxWW5e6eOzcHuz7KDJCl+Xgh8Hi/Qlhw/3ZgA\nbTBO\r\n=p3Ma\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxOmrOmYdjdIIFnfva4qSx5dkXWSXRein5kIQm3cTezQIhAI0ANp1HMgb3nDsNk+0xJS9HIX1Z1Zq+VFK2sPjIErtP"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.14.1_1584986244906_0.4966234822713267"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4e6be3f4.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.4e6be3f4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.4e6be3f4.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"1512aaf308db7992eea7201d4af81bf1e616d5d8","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-lVwhUJbQ2RskY+YvZMmllyeJToX5DyVXICpQfsTe69txQumM8Jj8m/wq86yAq0Hl+7GO/pEUIW8ebExYcIYrBQ==","shasum":"e9cbef88850b8ffdbf6b4641473eb355dba31cbd","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.4e6be3f4.0.tgz","fileCount":16,"unpackedSize":67100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenRwCRA9TVsSAnZWagAA+K0QAIv+1GLyL8ZmYXwoJkia\nECEN33DqklXy7eSTnSIs5XNxEm596TKxCPNW3bP4fxFCV3O0TmPpKVzneF6A\nAkucXpG2TgiDxHbqdlRu7XRhwSi/2grwlWLW+AV5wdvSOyXZfb0rClSWqzVs\nX6NrdjwsQNGmoaZ6SF/Q68eBgZjflmYe2WaRRt5qQpge0KCxFdocw6jpfmfW\nJvPI4jSNXuoyUUdfszcCUx9gcSzYpWaFYHnVTwZf+1UifyQCNsMmy+99Ys/Y\nFW7H0p4GTqOc46UtCVYmlg0E8zW+YjmhbIwMzrOFl8PM14Dtd6l4MutD1ORN\nnO3wM1vvEIo+XDrV211YM/viLKg9gCS3y7J/uQgbg45m2mMVoTVybVHvjEfD\ntkWHhQAV0x/FWZD4xZr9Gc+452sEsSP+ohI3PQVIRTNJ5RG1ZvkzK4Q7grY8\nmi3U0+5fpkYnL7ocv2LJ6fT74eGqLQuK1uSg1E91+ZUZqjMsemky9TXUQoAh\n1Wcgsp1aULjFxujdbSk6AczX/zZmi9rN0ATAd7Yn0rtHt4ZUH6+QeFqk3dzk\nwIl1G5qB7bVRLGpUCzmdJtmSnXtUjwPlc89skX/CBQ552jAsD/T5xU/EdCif\nT8l9rSDamRCCpAqs2JP63OkN4SAYM8KpypXAc16xFn+dPejdvqDtOxq1unWt\nC+hW\r\n=R1J0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGpHzT3Th7Dd40sYnre8b20WLMhcB5/eOevN/v/2cnUAiEAyDebkzocXaTcoDXgv+GZgaA+HQ/SPtttechLYRGTKAI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.4e6be3f4.0_1585083504131_0.527766726207509"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c29a683d.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.c29a683d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.c29a683d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"8425a605fcff9f0247ba649d1c8b16a70fe79720","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-TaB2ATVgwmtJyH6mBJjIXW5FeVlWN6YylkiSAaS7pd2G1/ZUWWo8/jbqIJXVQUTMzd2pWLrsBfgcnupt+B3v2g==","shasum":"38aa51d90fc11dd34ed43742544367528477c714","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.c29a683d.0.tgz","fileCount":16,"unpackedSize":67100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenihCRA9TVsSAnZWagAAsMsP+gM5sKBapTZbj118cGvA\nbFY4yyFJ+1fWxvcBd5yNbsYMjXqGkv6RcbI2WyYJLOwQOosXZE75VT51LPqZ\nSTQu1Aen2YWcYIKcbU25Aan2c+wmejU8qDiEyXnsthT7hk+xT4tFF2V2m4PM\nvyebKHDSaz44DklSO0safa4yrr74N+vPDM8nP+ykYLadRFfdCXhz4mL0mEyl\nricBSi/bOT4tWH/aEnzFDtXUM6spRQiQJOVZPiYAUNbomkiHxwh+DPDYudWR\n1rkLhLhYMdfWCKnM7laEZrNOPfZS/gj3Yg6BkqRSqhZjk1+BIihF09fx0fEK\nuv5ULn34XrMjlHm9fO3TJtxWBh1WJ6LMA60KW1bkLsuTFWrgSvenKzG4GG1i\nmqqAiAVOzjTXeV+LUwP1hVAHLK3O5RPFVkkYeop3tg5KXJGcTZef1/fRmwjy\n8jlD3dvtv1gyM5tv1vXCPN+Vuo3QUOhNmba0WWPHzdHKaHgkjbYXFbQp+m+v\nlZWe7FV85MSe1r6WziPOD2Z6J+iIv5lOb1lFPEaA4drDpI3vYOmVeDEbxsqL\ndc1buFSIxz2NQZZ3gHKK5OIN0G7r8uPiicOPi5tDNx7D7H5aZnAfAG83FR4m\nKjtT3ZaGozsDktGeYgoqnv+i+7BvuEGQFc+dpwcDPivrf+s59D0iNZ8alUOQ\nz6Qb\r\n=8eMv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6jSZeRVYiWT6jVC7OV+/Ls5eCZ3ELFZ0bkacDt3M+SAIhAOXGOUruGuUswZet46/yFKdb7SqV3PolZzzYFXq4PzFZ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.c29a683d.0_1585084576990_0.7202362059627407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fca3dd9d.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.fca3dd9d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.fca3dd9d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"3eb322e4775d836b8959bdd2dfe63f09dd0e0fee","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-BbwqpwqCsV1yhlBmOQfQGwVSGiBv9p2DS+mOx7//2CAo8BlLDjN+Or4bioQc6eI9JIISvkof8LBhh8W4OgGGnQ==","shasum":"9aa1bcd3c8035f687871710f1c8da77db3130584","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.fca3dd9d.0.tgz","fileCount":16,"unpackedSize":67100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepr4CRA9TVsSAnZWagAAreAP/1j88uGkHV/ME8osqTqx\nr+OGzF2xmgNJvAgceo03pAc2OT4cYwxnvBai1RDFqJl0VSwuLnvmMTqNQqbS\ncYLvhOmzle17YS4UmsdNOJRt3JMXS71tPK9CbTz0OekIUERTtlK/AdMsFKE7\nnNSXhxOI0voAxyot4MItUG3HTYgNxdpZ+6osDqKylJK1HH1psBMgg/oygWJO\nWI3AcO7nA3Qq0GV1blNw0zCcY0CSdNLWm2AV+RzQNTNb9U6AZK7Wmz99uRS9\nmYkdKWo3Qemulxvq59LrfAOlwRysa09Toc1jDUaUqPZX2Gq3rYLC+0qQPZ7i\nnBfw4eI27fhskPlyLnS6c0YGi2fjWX6Lw8mdXeEOo5CovDqFwrDY2WcrcGOw\nf3r+o41xzmLgc2nUIAIOmMRcrbaUDrbqPcRW1vbKBZdpTtscTmvye9b80Kf9\n+uoxdXzQm4lB3ESPG4P3+ryfgDuWBxu+13hK8H3y5Es2wpRlAxlwZxr8Z/li\npEhxyKzLqXX+Aooe6Reou0KMt9+hqe9NBsbo7kyC4c0P4VTjnoTCTb1kjlPD\noQazvY3D1SOt6xK/USlLbfmjb+xoWusPUnmEJ+jYzPBqW6xTZfYgMUgDKMhu\niTqDtYQ+IQd2VRCcbOF0uOMlG8289igAlpEXhwzr4lYxQsPzJi91/Qoq2UHe\nVr1p\r\n=OJD7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2Wk8myPUtS6PfNPYE17GI98R8lckKJ/l9vbcvf8IkugIgJS0muaffmegxLjY0/SD7vGhUYPoWadwtqM8czc5bfOs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.fca3dd9d.0_1585093367973_0.6535561535780523"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1e73da49.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.1e73da49.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1e73da49.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"cbf63b814d242690910ae4946b6144120c317eb0","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-H7mnVkD5SdtdjmsLDtzLY6Xu8n9esHNARVlihb17DaqJcUbUNMSo8bSLp+dXs9suKspxlrsiuFkiJXnjZXam/w==","shasum":"dead1c90dbd827b5f51a1a69fa4589306d6a90e7","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.1e73da49.0.tgz","fileCount":16,"unpackedSize":67100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee80/CRA9TVsSAnZWagAAnh8P/injjynhrTxmIzjw3QX6\nLHHfSMyiBikF7EIoJgFS8oMIBx/CJgUu5P8/Ok3jrS/8TKNiNblqolRgybe1\nAHU+K66A1AxT/dzHfs242rfnKms0oy2Hpqhl6D28iJH4zcHT8sylL1UNEA0R\nXXJJR6rn6c0ohp+CJ2mQ9bkjEwbiYYtlDL9CdpasG9ib3V8wCd1waCwh3O05\nJtO+dEABelXZuagIzL4WKiOd+fzVCMs7hheqS58ixVWar8tZfAmxlvmRzs3h\nhqERIwnK/6jjNXzFH+p5l7SHzQtaKS1NF7gxWLdlN4J0iXj4UyS8+RFgZQOJ\nVhZ08KXvI2flOiweh3CQxOUbrxOBVYY5GqRWeybCkWUbq1zrFkfB+N3XvGZm\nYaLWD96yy9EVK71pTmg+o/ejpWSL931LGaS+TY607XGWEhcO8Q8Tu8dFomR/\n1ZOxXKHJhDxPuPrCmxRARzFwU9hTfK2N5vUvOHeqbiz2ZJEOj3ATWZdaWMUl\ny/3TSWUoOuL1WhwuzzrRjhlciiaq7Ry+1Ft+gInYxsNqsjIwQlfsOVJvY3nY\ndqPzpAaHYGnHC9Y8DQyxG2l7hxJC8IuYeFdmFRyZGKT94qgQzzWz+NcolBzy\nJP6Uc7Y4P7vKGfQp/+h2AqdE6EYv7AbeUjx2ndhwYyKuZlrfZBQ9aUwq8NFY\nQHF2\r\n=fa3r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAeV/KBsp7BYymkjTRdjououU9fuHi4LAE1CYBYDv4UhAiEAlixoXZvk/oAjXOeEYPIwhU3qS9p2F6f3weVtoVE4p/I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.1e73da49.0_1585171775367_0.37283960441474817"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bb6dfc5a.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.bb6dfc5a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.bb6dfc5a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-W2VOpkozXOezOks/aMXezpWHDGVInKToY880I6j3Lg5s0c5oounPCUkoX3X2VWa5SruLPOHwA7rPrlZz45gNEA==","shasum":"9b1bc6bf607e65aa695a8871d9ff189258cf08c8","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":16,"unpackedSize":67100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVVkCRA9TVsSAnZWagAAIQoQAIZgfA1FEZkXRocSMIie\nBt/tUFtS2m7GHMiXs11TYwhbRIy8mjYN5CZ4brYp/eH4Bc0kMGa4Tk12K1Yr\nNcLq9UKHEySrJ2UNPunWW8UUcPHAzVM79hhKg1dR7C3m2AfcTHFHtMAt1VkV\nZeOZwHevtD4L2iS9crOe8SiUD7C2pbK/qoKJrfqM2m/S5EhYAISMoz6itvGI\nbKr37SaUAhA4Tu46m/UlIWM4UyodOgHvzkdUv+nsCj9L5u9EELGPbLy9HLce\n1lHn1jpvOThb306hIynRh+57c+bu2UDi8M1Sj6KKDsASkIvSsH4xwXxpBePC\n9W7mSLh7GhSBHyjlNBwaFfefhw5OtYGugScCJlDDXA5lt06MDsPtAZzh9nzm\nEPVEoF5OKyGwGkuYjSBEB+IjbxKudeGEYQsa7N6VSkbbcVS45Hheir0tgu4z\nqEQPQ73pqtGHFFZpYoZ1uqcI2RpkDHUl1dSDnG7TnN17o42CJpB1mU588iEJ\np/tYeihk5a9Z3e7/TcUow/WuRO4wiONd8nxia4b9yhy5fDvVn232OFqlrG1p\nUD+i9gDb4J79TAlU1QzTQjlwlvkssBgoBbXD34ScUUEB3P3TkDTgUDD22xv8\nxUeEGMPXsAdOQraWaY3sDbDQ28K6mVKpSpkpthfZ60HJW2lMnuIi2icoDKQA\nqPoi\r\n=fKXJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQSYPqocqwbR6PbSCFtVJp4smQ+KWHQSln+55wGufhcwIhAKACClsjaGaIqgvM55HQd8TDvrn/nq8C6LExFxN9cJb9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.bb6dfc5a.0_1585272163700_0.3787038572959516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1884603d.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.1884603d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1884603d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"9a072ce4f7812e5120dbc51ed124d9669e1f7be5","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-uf1iNBPgtDA/Yj11GHzGs+DDjG0KGaijo9qOmfHyZD04DmCxCFAAzg97+4MW6qROP0fa51UCVZQgiZXvV1/XfA==","shasum":"078a2adc311f979d3573f3f9f13dffcee2f950a9","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.1884603d.0.tgz","fileCount":16,"unpackedSize":67100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefloZCRA9TVsSAnZWagAApzcP/1/GI38rtyORReMrcQBu\n8d+J+9DfMgNdBCIHo4YgI6/7coyaRIW3YKzHo9M3fysHSIHIHswxlEEFBpXD\nqSwOWwYhhSqt+fYPX3USg0/3+ZMdpKSb1+Qrkh3ULPe/MROg+huOY0eg0/5K\n5Kc6Qc2FDXuTOXpisiguAuLrOslIdw64LYqFOSxTP+uvGyKbExCJMggc3Y/Y\n5e4FUzjoUQhoj33jy6ChN62jh7VFu9/uwuJVeA9m1qi26pkpfbkoJ+5vvkfZ\nEz12TA+ndAWrmibpq9itiZe6HSHL3cgvCH4GBhYPPBdiPpyBBv3NzkhchbGm\nEm/XYsqgyO6MMrxjQ1AXnFFaTjDT+D+NF3xykaHa+KRrYzcJ2SMxGsqygjll\npngJjLBmjgU8I6fxyCLB6Ei5GRUXVfUg6TFwsWb+vx0Tb3mO1XQqkF72t1PY\nwcmV4K7D3mRcvgeB7YtA2kr+EmYK8n0EKXztZLEM559LkIeiWvGpltsXhxgK\nxVAVAR4N+9p2Oz74epMkZpjM5nm5kLPEo4bNamZAp+vLDms6g91amBQq6mHR\n1t2X1ToLhrzZgT6eKicssuX0a6zDmSj5dpNQ7emQjZe3wKT1dhZHH2O0yNCc\nw6fk7zNWmjJKTi+y+SWDjCMn7YuTGxWNS6OKRmqa3GP8kZjYjfoiBqJ7O2oG\nSod7\r\n=OcOm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB/NOCizagKSLTwVGb7SSl75A76NDQNdiFZFNn2D9EhvAiAFh9FqicY3kEn3bl6piT3+fqX1qFun5v/AxjYwIO95kg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.1884603d.0_1585338904914_0.6302485802533364"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aff73cab.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.aff73cab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.d6315efe2.0","@material/mwc-base":"0.15.0-canary.aff73cab.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"40f9b297ee5f13af191b6bf450012454426c44b0","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-061YNatid4yN2+Jf3tsmDDjPneS2yClxkhy+YuTFYcyqJKtQZDvARzKmM37BRlVFRLTbDKqi0tArMvef1fFG1Q==","shasum":"68be73fbd268f9084fe894e06749db74fee5aa5e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.aff73cab.0.tgz","fileCount":16,"unpackedSize":67100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmyXCRA9TVsSAnZWagAAXjMP/3PYfc9GpqW1LuV81Igr\nM7nhOJfM7Whak3vJTt0EqDbl+ZDoaLKQmzGRASZgdOe/bQRUv0O46Zufk8l7\nxDYxEyYXGShIg4AauyqOGlchUX/Lxd/E59ac789PdJ+nzzj8ieDYE8Pqkdbl\n/z+D9lmfVDqGu3UoKcTTkrUkekdzq9IHDTfVwunSkMN50LR3LCddyBR5vrgy\nNG3qLa+wDkRvWDP6JmyMcpoueASknD4+bmnZ+cfKyofTK+uD5UjtEHW4TKOa\nYBRsi4uinfSyF/5P7PV8iMyVlMoGebkL85qPgFc1bMdHPDdPZBtjxc83D1ll\nxb+e816o1FNACH9ku2hLpKJG7gxYBAyOLEXVXTUQppRZsblkKfL18kiknDNM\nhPKzvO2FRXZyAYbcvPjuf9NDnDqrOcLvmUP7lCzzAI7V4xXNXsmu6/B6Umyp\nVCg9CgM3K2HhS7MjeKxDl4XzLNU6Rg9aSkntWKx0lCufElW+akTpCkCXHlQx\n0E/33QGWreAbZNfyNyYpx6fQmqC/IqI8X/2tt/l0vf0YrxZitbPFqpuQDkFs\n8m73WOCsJpdqqetg8A3WpQNwHIl8Te6dg0LGcf83dyYn66ztPkiU9Q+0OJfl\n3AKViTu/JfstcavtkqZrOwtCBgNsv3ITmVuzdgZcCpZlwoZ6XLjBjGIzMENb\nhVFs\r\n=XTTA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCK51vlk7MZNB7lrJYMtqxNUmVB4p7KuQDCkSxswJhTdQIhAIpwHy7qFgnq/rZDrx11E6nEeSWaYi8+jjN+mCSLVDFo"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.aff73cab.0_1585343638786_0.9178029974550677"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.63168f61.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.63168f61.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.a3016368d.0","@material/mwc-base":"0.15.0-canary.63168f61.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"84107987770a82843942246baa8226b37f269240","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-kQeHfnWYQCgoUuEjEjgIslqzRWUx9e5TIW/5M0nHjo703rehAPesUaqn+6KJ5WL2wLEpHwqr+2kd4nczc0CCKw==","shasum":"6d4ebd382620ab283c4075a0695b6a4c977ab509","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.63168f61.0.tgz","fileCount":16,"unpackedSize":67100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4f0CRA9TVsSAnZWagAAI5EP/2V67qFZlDjFzJoZa2YA\nb9sH318T9YLV+fLXzQH9zwN8wq+bkKyyfvGt8FxUAbhWPxWzyn4bG2hfT3Ts\nM4IUVvm8b7Cq40hBrhxwTsHp55J+WDIserLgbM+LmnjJL5r/54Rup/2Mg5gG\nEv1+8cNLbbju/rl4IF4h26yRm1x5aBXjCKbIPkb2vnAsXAwbJKNfqg5XbNxY\nWWtV7aTEkADeLTo5Sou93w3wIwX7mULAbt53F/Txn1Bkge+e5AZWxzDd76Yv\n2h850DoIoZbFxr0IzdMJfjO/HUbOUM6icZ+teftzh7H/2PUc8rx1MHuVbsv/\n2uG28ZYGsq+pTz/M3BCPf+QJOavbyEAxdcHPz8ERnyJBVX/rLjuw+1d28u/G\nVXSBoUTUSPM5zvtM4sUz0HQ99qxImiGaF3S0mJn0pIrCTrQEgZ5EX/7UVFXX\n4cyNjbkCU4WOvoEnEmGsHSuRNGyf9uLPRHw/VLNaaC0IjUACYT01qfmXlNLl\nHyXQUeK2vNjSprowdI/Yp3lcgAEAcwe/f3BUZXueDP0x3k/gFT5yRJmxkdS2\ne3bwDKNdm1zEoicMkut/T+xW9C40ZwQJUsbLrF73ZKvm2RNQ3pYrfK3U+aVe\nEA0uVBy+moTNMIdOkUcq7rsMsBGgJ6UjX447cgJCDYoXGLYzLMENVhDAvbQg\nlbST\r\n=zoYj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzxmcnEO5KSWGQFGjJOKV3TWRLOxbxvQnzW/PPOfRk1QIgCZg6VYZa4RPcC5ZzsWi/CQdcKnVP4gQYtNnbCMkmD5c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.63168f61.0_1585678323723_0.4699704524666035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9fb79b3e.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.9fb79b3e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9fb79b3e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"6669949a31d7f92febd25f5d49eb40a5db4aa7f5","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-VyiZ/mzjwaLZq6IwzQ56b5ZgjAUQ6CiuGZZdFfLDDpzL4LJuBxL2tioYiYKWTKkh2QnDX9n0O4/4q9xMP5X3Mg==","shasum":"c914c70c075dc80d47c2323d70e012332261a6c8","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.9fb79b3e.0.tgz","fileCount":16,"unpackedSize":67100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7P4CRA9TVsSAnZWagAA7xAP/AhoGzWQQUSMN8R1A54Q\nqRo/o7eTek8mV29yddYk8MEO4IocisNOCJA0MXf+7y5P3/Vsyv943RsX4g0a\nl5AID6wb8Vo01gPNeuagl7Mb/ju6cC+rzGcj0IdGXpSs/ijdukaNcFzV/rPj\nDH+M2T/GxoaH7oQh/CeHt2kANWXAIONQJkWuvnoO1XH13rXRDBIH7mDDsw6g\nre9UIvgX9mDfxsLNLAiF6YOlJRV4NP54mNKrzoE1mUKp9i4syDRUbZgiuzsz\nUE/oY64qCS92a4fJSNKfHKi1pMxV+V7Kwequ4VlKI8TFHW4W8AyxPMYqrDPd\nnS8TAoHkvdOTBycEFJeDPuTSK/33D1BYfde1bsGw19UkUUDvt5mXjHka3vR3\n5F+B5qa+plvdPaW4Is6KMCp7CPkeTUypWQJo4r0cjjCaEuhc5hX5Pj3G9PGR\nNJ1d07+yrVzEXKDmPOMsdPZsWKRjxaezFKnGqWtFuRaigVnjIasDyiPa4UcW\nVCl9R4viVf5/ebanVLaPY6FKCFfbY6e8gDvoq+jIMKdpo/dcK5LUft/kvC/h\nQo+f7DCDKvncOStOzk4HP3M/kIz+FnEP6rnrIllFv0nI9KBeKhA6nVGaM3Zj\nxUZdBaSwQhSuQ/lxdkj5frsa/ziz6ET6LQBaQ1zTjK7N2RYPpcwRotAgAgMk\nDKYo\r\n=QWDw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCn2CpZZnN5mVCwdESNrF+NaD2pXn3bo0bVlvjKrHhO3QIgZg38yj85M1qwXXm3wCnDoSpPwF6KFddYqkpAl05oLSA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.9fb79b3e.0_1585689591956_0.8633054624172345"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bd3e9e2.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.9bd3e9e2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9bd3e9e2.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"9b56904aedd36911e83576292843c11af1a00006","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-V/+yEhjgZ/kVfS6BYeNY5tGTAxrKljv1U/l3ByGlR8UebmQnznaB5eGHzvnyUELys8jQRsH9LWja6mAGMSd/oQ==","shasum":"5798c9f96fb9525243a0987dbc7c59cb55040b2d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":16,"unpackedSize":67100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg90MCRA9TVsSAnZWagAA1eQP/0e96OmwZGSHdbgZTyW5\nfPICDWFnwvUzJJ0e5Z5fAWdQMjIjTEgVkymFL7oWad2Dwx5TIocUMxnkONF0\ntLmE/J0s6iBo9kavb7MlWksjsyh6AHu1JxoRnYjULUAulFiw3SAUDZkkVJ1m\n6RS7FsuuHdvEtlhwXktnFUeDTyodiabc76Y/p6nZWmbqvilJtJ/SmEEWHevp\ndfum6ye0FcKQUgNgWRACSw533nxcF1nuvkej9R99ITHo3tuh4f9dcwq/nZqn\nf16+Oyz4AHk39BRoSDRVcNeVpKvjzAZw73Bw0tTzMpzSXur+fZXcyRgkpoJl\n1h4d12D0RUvCro+OHi76H3Q0CSDusI0j0uINHZwUElWS8eJDcUmFqwBIcTak\nF7JYYIuTnko3p7u0A/f4lPFeoU7q+Y5waC26Sl/6xE29ZILe1ApPxs8Cmf2Z\nO+D0jA/AfZyeceRFRAbYnw6+TifjN2qourUQl8u1mKxvKLAj3tfEVceY0hFs\na6ObZFyzOJ96kGBL2GKsR81PtkirrsDJFThNYd6XVLJ+eQrMcoXrCow28Ezh\nzqzoa0AicomUTs4IjzyJo2Ct9LXJYd3JqpDF9FWSjGUd3frpAH3hOvvksXUa\nwnZWKreLFz6aikqNZoA9pLWnj57uzjcKZGkHo7D5NspRnL34T9LyOmvBd9qf\nkC73\r\n=GXug\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+lk9Vn8b+WNeerX2EoCZBy+aFXx/XRJb1AVMeE/WeLQIgBdxAJx6E5mMPSYhdWcQ8gXKk7APeKIZJeahtqg0FXdo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.9bd3e9e2.0_1585700107804_0.3152550495979314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.072084ab.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.072084ab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.072084ab.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"98a539f9970dea2ebc84f30f462c69e72dc0c4b1","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-GJCFxcre62P8j3uZm6Du0HRZjw3j+UR1ETfGgNDA/9Emmv7FOH13ELKjiTP6PNQu+cnAAdDSoalF1heCPHI+PA==","shasum":"0e80099981946d07167c8cd470e06ef4a92b8e01","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.072084ab.0.tgz","fileCount":16,"unpackedSize":67098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehN/WCRA9TVsSAnZWagAAu8UQAKNrzBoAlonCUf6uUYVk\nd/hMaz/aqxoJSM9NSGd08DqkFQoOBoJ8LCUHeJHXiOEDe8zRdCQYQhN08OKQ\nk+M56H5ns8wl4C873hVczKSxrdDWY5K0JVLDGwdlCEhpxYMoijLrMxyBg8Yg\nY8PpYHUxtv7XeUaUoPAU2orfBjds06xSA0MW2jRavOH8UOBG+sk+DXZAsb4F\n/gR4EXPcoNPv22AtWklOGghZPKTpsVoj53tbKqZEZYiC+pUggVYCFfZbFkzy\n3sjIMLC45qni7CfxMEZc1GtW44s9E19AC+o6/1ur9nTRAx6jRUY7UNyVvXrr\nh7wPT4xP/8A4FsGK0GX/7+353HfuUpysn7xpZNggD3vbswooaYlYQZDOFrAQ\nKdkBE3KKeCjSqviGU+5tGtuXgPrx1jGKrq/g2COWgLup/WaCvlYK7qKDa9sq\nRkxiVmEMu/7FXKS0JDvBkANd+N5A+NiUEaMvXPranuiKqqPhAP+jsaMDEkud\nx1ypkvlNtbTJjcZA68/z/GBCMuEzmi+jtGc8jbUK5deEF7Y7CJKCOf48zWAk\nYYDPTSdoRtEi9mOfoE/Qd84Ndy1S9r1XPvmtJsUhe3BftU+ceFP7OIg1p7Ob\nz1MqcLjVjgAz2l3yBS9Z8BIFpSfbUcZcuodmrrGv6B538aK29ObgZwfJDza4\nCFs0\r\n=GBAQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDq/dQt4VAiebuqBUezKgJ9owkbINPPPduDgKRbE428egIhAPgw8vPYSxZRwmDuS1YC0Xl0sGgC9E6kmXGjsLiig0n1"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.072084ab.0_1585766358325_0.13760397869340757"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4dec04af.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.4dec04af.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.4dec04af.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-0NJgprL7AfTMcLd9z7AvIDFtFiEouYwkZoHb1e6JpUsJqVSPUxjIFXHLzMnoG2wEbu71KKe6O+w8vRF5qhwEQA==","shasum":"88904a693c1d92e2f1ab3a4cbfba40a074720fbb","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.4dec04af.0.tgz","fileCount":16,"unpackedSize":67098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5ygCRA9TVsSAnZWagAAWKwP/ipo+8yUmpurmPXnnCJf\n2qWbZAGKqtjyhLtbrUE4IpQ1rUhq8e89k0A8oYrTPyjdPrVOUXU1YTDhlcEy\nUAau9RnF84zHoX8TuWyC5rp+sIIFgKDxIycGFsW/hTycXQ2bySvDjXhfV2c4\ntNJ+NAB0I2nFqtKnNZKAIUHKtSgzb6GO9eTv8HWhLuYE2poSHbirmVtPNBY4\n6VKv9kIt4PP1sNhs/7HNLf1c3AuG/Cj0nAJGq55mqII19OyOHWdZ4sQoJrWQ\nr854A3WcLuh+LkI2T0q+01CoUSG0sut6HqmS70AeKdJnQcU8QivCTxd9yOXo\neL0Bp+vViJwOzBFK63ze595GzQNOlgCS30gmGjgkB1y4+2sAQwyJcjNlqLG4\nfDAMs/X1fSD0IjHUFdyFmI5xxr6klk/Rc3mDPNafksivICOwVqyLk8TfHASn\ndpJbcXWBd5dqomrOtdYfNqfRwl64y1TqzLZ6I6eIwjT41uKnTeSl96ZJkJKf\nxs5VHoxaJmN4Vytxaa0ghocs8oqPM4kZJG0c5PvCuEp4JTGEY68QNSKdbUkD\nyNnzlYn9bZexPNKMC2gRucbQRnl4QIsR61RGuV38Bkt9bBzrBt/93evafqWS\n4aE/fJnK7DkUeWIqbdWlnILrBiSZoga6oEhF9/BxdyJRzWooe0o1gVB/mQmM\ngyVY\r\n=xTcR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCv/FLcEUM7O8dV8dppRXwDRv/RY2/E+c4TRBYdgkYP+AIgbnmqA589L6ICik8uDTcfOvU9sZiCueBz7ygNSPWhwIw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.4dec04af.0_1585945759697_0.3198379554457478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b676354.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.9b676354.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.9b676354.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"423f1ad2d234953804097bdb30484154440adc63","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-va4mDZu/yTKpEav7fW0BbGEhFHTHFuIpqM84Q79yYuAeXX/2ZcjO0L308eudRp1Q0Wz1/RkOF0nFD+OpwrSuiA==","shasum":"cbdb24d5c06eb2791dc3428028c60b830ad74f1c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.9b676354.0.tgz","fileCount":16,"unpackedSize":67098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5ytCRA9TVsSAnZWagAAJVcQAJow3n7IANGRMpUvYCng\naYxYzUdJIVE2EaSnrFRz2bODQ3hJ3TZr3N//XmOFvUee0wJcudO9CNQZOtOQ\n1/DtB3C7+0MjolRq5nEFNZYWiq2TG7IMyufeIYkcfQoTGiBZC/t2mEDglOAk\nw0d5/hjli8dI+WVG/bYOrQpc6JeOJYnk3mU+XT9xwnzVBywIbEMutYUvSZzP\no0IK9+hrEKm3RBDV54qgAsleMT7HB89cgbNt8Mi3sXp5ejq5oinBymJYD6Nb\nHPcq+BeqL01n11vFl0ODvwTsH1/CiQuCWttaSROKyMuJAO4vBB6JdR7v+1Dq\nAmAX15Lw3rvh1xR2I5COHeP5Bm7XIr5HDEW2Zmr8MG/0V0TUvf1dRZxDoqGa\nySHyEZhlu0PVCd8Nr5obCCaGZgdxSLYFTxZtN6bY6GrkAmOu5S8wiLpXr9MX\nY+hfVKFikIHWM7FK/OY8eowUnVKGk1J1kjTJHHXpGFNa9jsq2A4Fom2GthkG\noZCUf2Q/hKoXKL6l/nJjNiiSBaCfFaLelyDaa8JB8nviuUkU+s7MeX8mKmCI\n5FqfAJc5T8vxUoyP5V8BN1kSoWWhPYc0bwD/Ig8bFe3qwSsogUtv4UUdvDAW\neT4UnA4+zu06YnL8xIM5BeCfhq/cx/z6tkKaZ1cuDfFK438w314VBxQ5Cz8C\neco2\r\n=HvRQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFjsVtec4811OGnRuk5b/4I6UVDPdaykAGpX9lKMBO9ZAiBO9ltAmkmQkhT5uYeIgE+i0B6/qRwvwsg1nsiQxDK+NQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.9b676354.0_1585945772471_0.8834557122739655"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.6b946095.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.6b946095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.6b946095.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"1b65dfb6b4d3dea0ac5681487459f46352e399e2","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-eOC5F1XMAxmrPw9UjamiTdD1WerYeylDA3lKpgUUFvhmnpZyuIOvHsMIP7geFQSkm6FB2uXxSpAn+uOBbDKeCg==","shasum":"a63a7badc64d9c814a1910544e83e95a5013ae39","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.6b946095.0.tgz","fileCount":16,"unpackedSize":67197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6liCRA9TVsSAnZWagAAp3YP/0SA9kB9MpmFy+88rZ8w\n3gWxMO39Sw5uTuSG6umv/RBw9/9HZ+vawQfh5ezLtC4YqP6Woh8TAP1jrJgL\nojOIbT6cGczLxQ0O3tzPNvE3qc7P4qigP1rQsMl1/FXSDoieUW1epXaqNbK4\ncFstmTnDYl6sk02Oz2zvXwSANFvT8CEHVaCvbuH2E3x1wXZxCIqmTu1809rs\n51n3zSNfVujYRz2UQ84cvCOCdimM7D0lZhSqpRBCWDyliPxINu4MKIa4gbGd\nEaGtkOcwgs4s2S1x8JRcgWjnR5PK3Y2eMfQUBXnQtwtcjbywBoUerwohjdtE\nnu+BCzgV6guUyJPO3b/As5NSJ9D/P4M47AhArWI2Iu3MtjFzXgrkODYJNOLy\nFuoAf/hk4LFrZZiJAf7YgynLjwE5hgcC0lMCmE9QLADPa58eR+pbz1NwmLCu\nVqquPghpWJWg2OJMhEemZ0FgovdY/17OptHHYvSpfLrw7gyQMwIJECUWdlOj\nmaw2A7U+ZAlhPuxHZTRWtfmGQPJuZycXrs0VRxC0aFpumkgpwhoTdfHFuMxe\nUxTfCT2ektxUVxnxyo8iUaAZ1thx6A9ONjJoZXtEUNJ4g608DdcEdwTcHmrm\nJNaqWFPdDNxFqYfJMNiApQzqJftTajfEassCFxDhttzSfz5hwl91vG2e1gaQ\nB5YK\r\n=4xux\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpkYnoNDesbBcFcQb0DUMIzfG3663psx6bzFvz7UR9DgIgT6iCV/faTvBQGSXtOvd3tcdg8oSED0p/mPu5FGINWL4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.6b946095.0_1585949025952_0.47033576357095397"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.5ccbfaa2.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.5ccbfaa2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.5ccbfaa2.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-+KyzHVTAUy19KjWtEcNOeiKbVz7L2iQZ6SM6sZLmnpVVTJndZ3QO6hDhsH1k7XhNMcEpe5xkCEVBAutPDHr0Ww==","shasum":"9a354de9f4e39aa0d810572f57233dfdc1e8a32e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6qpCRA9TVsSAnZWagAAw84QAI1X8C3A5whdTxu2ewz/\nWVaFjS/k0PNiYA0eDMFo+q3EmUqrIIVeCtNpfvobNudvsXvzRvXz3LpcmOm6\nSQ25fFd8Rw+z4cO9SkIvsCYm97CL2f2Obp9+Nk4PfL+NQZ8HtfYxD0uoibTe\n+w4xnS5FQZXIurCQ+uqrQVINdRvjhuVteFoR3zfiFfRuv7p6WWifYh01FPyy\nt1HfDLSxofLPVvoD2FPG+FEJEyP9CeLKZZLUUUkO23ibU3RGETtwQTBJzNmZ\nuG2E4lG88ygG7ctc/6kWhquhFyxYEHlxM/AujiP1py3/3EzOzwDc1jx8HPvK\nJdu/M6xxAH6uOuXVK+nZEEm6p4ovuc7Zg7WoNK/BiSLF2RlFUTKq4AsMicmk\naXuMilfkqXnNfggI1+Nug+SJjJjrSBe5UUVFQDOvC8EM+/Zqee44Ynbys2aw\ndiiTR63nVbdZ6xC3MBQMBXkZckE2ZMULAFtfGjla1xwhtF1qAt4VKb5GBMmJ\ntFs7IP6IE7mpvlvhhsTXuNV1NH02o60rrJbzki5+z6rp56CR3f6bV6icaJUY\nuFaBe0oWjERPfjBKHwMG5of61PIpcJ3rGv8MKv/wA0C34nWIbDG3v7OnHabo\nNoqDobQhY4HbqZnhG5uZwxH1zwSmxq7mrQIZf594w9FrSq9Ki5PzfqblumKm\nCZAD\r\n=r1pJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJ6pGUlyeTEmU/17ALeVUEVGfr2eZ3N0BId3TfbRUiUAIhAJ3q9YBA44axNa/72O9x9TKbETczosXJFOU6E8/z2CrX"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.5ccbfaa2.0_1585949353261_0.09180812901972213"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a0ab8772.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.a0ab8772.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.a0ab8772.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-xEI0TIWVIpRfo0tZIAUFYgKfQcbnBHTpmA5UUlsGF4RLNjcw6w/+mUTH0kzuDQ1v8ZN/XA/2R8m5K/bDnmWMkA==","shasum":"b515861e73622154e87b12adec680cad644e9ad0","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.a0ab8772.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN29CRA9TVsSAnZWagAAAEEP+gK11S7Jiol//bkNn4M7\nDpkYlv/LBM85B3dAT/8w+bHg/GD85LhQqBOxJFSl3iEY6UqdfH4hVm4wqmMc\n46Jcq3lJmb5V9fl3TX0uPPFjs4soh1fxEpe61BzFOfWAVgWaebHns8wU09zC\n8X8HFmEz1CqwSSz891rfehPbDav+eHZ9A7xciTrfu17UEVaQNMKcaXIgQ67U\nzxgTR+TsSscIfw33SYb3dBlHbgO2fGZzA4cADv5mAwllhh1YeSEYPdh802S8\nv1SseOyDOcXK2uqNkG5ra6tmnDDGJEghZUaOa+02ns9GCxhFeWJFoNEUQRkH\nCcCdlSqM+GNV2rOMHfWU6wbe3VczgoeddCbUMsgFChk5m6rN6zocQmdcDiph\nsSxnlZwD3sxwQ9qJyJ661WlURRCpll5yfDFntnmbXs8qiYeUtxH4Qx7OHtBx\nYvXmiGc2kDb3lhP25qGWntt6QJQ4HKy8ku7+KRE/dkIvGEMpkFO9fIFfZXcK\nAWllaFespSi4rT2Bh8ER4o+MiNNrZAcqo7FmVUWR3NOMz3YA0E0y7V7L/DJY\n8DdFMrjIv1cnEGHW1O2IWrTfLQPptW75AY3HLD2wYiSJ6WYSa+zDBhz2AezF\ndKRI5a81sDv+0OjYPM9d0MAcbKgNOeOlmgrS+b+BoSfscFWf2HkP13mcpNhL\n+7p1\r\n=umcp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOFhVy0PBajYywpsb9tXmTfVFTBAQuMEHV327qe8Ov2wIhAP4XnyXsQwS9xu8t+mzDDcLIShruMm+n6lzTy4i53mKE"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.a0ab8772.0_1586290109508_0.01579571841391325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8d352305.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.8d352305.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.8d352305.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"d38e537751f3d38d903a5c7c03910a26cd301f20","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-LCEe1V+XC+cc4lRKefGqvp1sh72MPgpPL0oi3SVmP9e0jI8GeErmrbO3CeiMZPihyl5KNX4DdIvFxQpiHUINfw==","shasum":"a50bbf8ea4fd05d1c9405ed4631f305fb59378ef","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.8d352305.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPOICRA9TVsSAnZWagAA2k8P/ik6EPgJa0Jh3fkUwsjE\nwrwbD6DHR4Dygy/GwfWDOf8YrW5qtr/qqUoGY+MBTLzZvFYxZjw27Bs0Az3E\nzxNsruO+wWN+nr5I0sLvHXthSqGZo7HMSExD9HG7toWErXehw78bsVWMTzOQ\namFf4VT7yvElrukGkjnWa83zZgRET1V54AT4gr81pEq73vmMs643yykOmXvO\ny52iygRBDj5hJ6KsktFVSDOSMlUhakwHoVKN9xCTvfA8TSF/ufrCHNoA1DED\ngSpdxPPy3jIw0JugSOhVUhE+jPXaaPGS0rKVYTVfc5+vobmDgOPOQGMiTaQy\nIUGg4EzkAKRGhn4kRwjUsGtDvjj/sSZe8ZkZdYTfnXBfdMfSTha+J6/ArIl1\nQiWd9BEMxekNYcP4GjtKDyU8t7DIG/vgFuzDeEzpd5cisBbmd7I+5TKqOiLq\nmEaA//q4bXGqI+K6ABpxsyu1ZIXyDJGQllVhheDvUM/gMF5XrO+eRdB2MAvk\nQJx5F9ycRJipMtVI1w9FYwN+TBCpMmIVwKGQ+ZouQJb23IPu7JNgLvOwCTDm\n4ZKf/Ss54s3NIA3Whb/fc4fCKnQgVmPwWCaTOeKSvWRzR6hSApPyLYQpIKPE\nYazCH7LWw+DpUft+0MVTWZrU50be4o6je3EXCsSTcJURYIpCIyT8PpNV6mRE\nZFT1\r\n=tUYs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSE2z0eIPDeu+2Vu+ZqRUlbcRlFlo40qyc43F3v7uAVAIgbPMYgtG77Grqk2vjJ7gIXR3xHOlLr4dIdMmk6YRglQI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.8d352305.0_1586295688064_0.7707131543719214"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.31eac79f.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.31eac79f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.31eac79f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"fc47d0412882f860dc7dc010657ade07c9a0215b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-CRBrptveGglilP3F16hTd9V2zFwNIX+4bO5+KjfeQpMBiSVnA25QMN/+YEjSor+c39CnpJfJe9UMdpapmbCO7g==","shasum":"0438a450c6342fbc207b53e94c76d85eb2b07552","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.31eac79f.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPcvCRA9TVsSAnZWagAAJNEP/R7ON0bc7zKduua59uGR\n0CwZ5QCbNQXfHTcXp9hooEd4c+Bo4PRf6l9CyIZn+/a6MJAHDEyztLtgXCg3\nUtFEeuHg+FiU9bXYOt6zryV8FBJWQL15VErYJEoo8zd2ZtifNYpbK2gmRkNU\nWGzdl0EOjk+7egaCRkTIwefOPRxlLDmU5WwGYxvEnjWrJnVOWhT7BiudOkXU\n3L6Vyoat5320txgT8LZWJ4lOms+bLosrR2X9zt/8IYlg9pqYSPcgnaitgk4S\nOhF4BZXYV/u/vJzworLlfvtoeZFdsWJhooligjWX4UGmrq8K6OghOlDAw8LO\noPaIxfYVnxkJliLjUCbZzn4MLs0+F8dn5rNsfo6qOduWP31UMqadgGEaqWZC\n/Gw4NW7QhDj131fNT9QgT4x6ttSnA3wcO3YKtqETvwJ1aDD+TUS3kbovtXe4\n3s/SwZF55LZnICkW5gvbWrEvUG820cvus1gJypRBmuMUm1PtMQ8FuXgHNXuD\nHjIsv4MaCx0a+hb7nfDjslE6QCbjQ9JZmM3+TOQeySy2oy0LAok4XEbYQEIL\ng0pKaKeW1f56asV83cmJxGlY1q5LRk0L08qpwoB4676S7XOwOygKx9FJhJVQ\n5Uhld+i5mwy8t4d7M+0saTmLlR9UI/eriTbRSt6bPL8JA2Te5wDZAbOQxo2v\nfxK8\r\n=3E14\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBN302NvgYihqxqF2Z+6Tt2H+4m5JKDv0FkGuoUytaChAiEAneFzBf7G6HAh+AxFmYCPlNQc7srhZwBOUlyNB1TOaRw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.31eac79f.0_1586296623033_0.9714120316462391"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ba05565e.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.ba05565e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.ba05565e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"f03dce4944b4b3fb02a1467dd03f7afc0b279a0a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-VwSUDouqZaevhDXnMVSC0LjAF+BJ9sYDwqahrb0uCEEZvADadMTwgJ7Ksa+y3FGvn6X9j2KKy6maq4xxRl9eIg==","shasum":"42d3761218728a6a8592f15f40ab022f0cb5436b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.ba05565e.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgqXCRA9TVsSAnZWagAAsa4QAIrLZVYNJGqG7e3QAwTn\nk0pUaK/5o7Fvp17grRoMr6DZ57UmxH/Bohd31ZkeS3YsfQL9jSlwwjt4EM+e\nJCLrJu4WKQylU9WnyROjM4sijMM4g8y4E3hkDwQVoC12DXMxcT2tRVDYE5FS\nA8Nq3sn7rq4AhyjXAy3xPz2Cd3WpCQ+B8rhQfpDMr30Yxc0pnJ87YyNdaQIT\n8+THOxtdAOuwBdbphzjWEPZgdGsa+ApTpMxJ6hUHMZTgpbnlfI3vqWLInei6\n8aWocMLqRrNPJK0tTumN+L8iwaLPUFqXLSXvBAPZSGmle6ewGzM4LtHIOUXJ\n2NlKHAPUl0mcA3tUVENgY4m82Fe6otzD12zjR4p5gipA5t+3RFk+tleT87hy\n2ws5gOrv+6Pvphju4Ztw0jV4x9nchHaAyqZrdq/6c+beNGh/OfpQ+FXquX5+\n3r9NHWwhckHWnXvg+D3sBtYzwzhfj9H7O0aRTZHI2QbB1aLJ1mYcIY6Z21t7\nBakwGgLsIsY9v7nGDflB8Pvn5fCy5pLBtUg0bVloCp3noc+iXDtQvBXzuhkB\nrtI3/7dd4wd5sML419ExvP9y/hVoP2AGcuTkVA6VwsOybHBCQMumeLWZh7iV\n8hg+oQnHMU44HgRQghcacQAA/wdwKQQiUGaiyiWGFXCP96euLq2kl5s5N3N5\nScgV\r\n=Ikyq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9EoTakHcc/KSrR0CIDOPIKKVw/vG2FX2LmBk6SpnxKQIga5KPSQYps9Tl8qnNAesaXLdcaK72jvAKPT95UjG+GLw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.ba05565e.0_1586367127311_0.8069501882478942"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.25099f79.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.25099f79.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.25099f79.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"d2069c5f3f79653f2526d8fcca853faca1f2cba0","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-oYFmFoShOcqXUyltblRwwlmoJWxO//aEDGEiWdpPKvIbwfm8aswOkvn3IC2ZMbOhwg6255k5BWrTyDtqfv+uCA==","shasum":"1e949b2abf2cf05b8e10199b4307fbf7ff3c1ec5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.25099f79.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkJsCRA9TVsSAnZWagAADrMP/32skGUGDq24yQaJuDhd\nIJBHxemR/iHYvvSpeNDYuiQDkckSUs8C+qgUwULvC3SI0BCEynTvBpMUNqiy\nUxAPqr8mRR3Rz6VCP3G7QLJK9T2dnUF5b0C7vrWz8Cqk48FEpV/b69RGfAZN\nQm8SvAuWg0rbnU8Mzmdzc1wJ5+CILLYTCp7yVXMF8DnizB7y2CcooUY2F5Tw\njmybQkqQTrB5zX+Ry1ev4d9PDS8OJRfhdeQWKNYam0ou9z3LeKinInohRDPW\n0QO7mPhQx0Xk7V4bENKcdLsp5B8v4xjymeAyjMlv/mtgRFrbQWCn76bhRfnN\nOuKjEEbGcxKHm15oZOZsYER8MWdPQ+eVdwppN4Dp6F6Mo5lnRJpvhNkgJfqQ\ng/0Y3HzjFyYiMrFQmD1P99o0nAk5rXsgnt/gObIEFi3cwt0DXi4AcxYhOqcV\nDNBFSJSZftVMpEd5sHqVsWfNoYWPXC0HA6TLXNCFu9npcZOvAtdAte7fJJfN\n+t/4v+G6yNOZwBczn1xqvcE5UzX78BM/EcF7PQfKRGMHdRGXl3wPcJGzTmSs\n9ovPFSnF4B64RsWXVBPEgySAX7UcPCLRl9MFvFaZay6tBeQ84QV5l27g++Jv\n7DAyWyttoOk0vgiNK+i9QbUYTgrCd5wxp+6WiU//ryKU/cyiu2cWK6pxWe9t\npKq3\r\n=l+GT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHWQWq22NyFj7yPzJvZBIbjDPse0XWzy/hDKcJnwJYqQIhAJ/gx8jH3eUH6RfsBYlz8yhzkSvCEoRx0TZN/c14nMSy"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.25099f79.0_1586381420232_0.05582010919885372"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.447e31c6.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.447e31c6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.447e31c6.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"948dcd3d057312750fa0c58715c74d5ae576abb4","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-VaGlI29KS+Vg+Pv8C48GwjFNnyAwPaknDE4A11SQOrJ2yQvBm/co7zJujqNlCuU5/6W162T2LbAudc9bZxdXmw==","shasum":"7b86d30d89c791329e5e57e4ca0af86dc7ef5c40","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.447e31c6.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejndSCRA9TVsSAnZWagAA8AQP/1nkfrEahHtt9xjwq3Kh\nxcBanuh3XhnxC9/y1w9/RmkMI84tdyp0XhXi6pWmXdUzz6sOkOZ7fX+PGs9w\n4E0+ggEj4hz2K2owCFgytSJiA7SVKjNjBDJmbVBbNR2Pw+2YcWvtBiySMM+8\nTZjznV8VPSjjTutRVoVn2uTk0lXHMdcCfFjLI07G3KI8zUp5LCAItsjUGp1L\naH+MGUTeDMaLdRstSYtKPSmH4/CxTK8H/AbSYfupb5TW46xFKaXeEZtH49+l\n0WUbVbOMUNAmiUaP9HeBcQeW5hZ7cbe/ltNls6dxsqp1e441BOOIjfSSTVO1\nX4VQojPCA+qN0Wmsg9GCLM44/5kJA7lPC3bRLVGEbN6+/mSiTmBXsa3skPcD\nRh8f+cb9ixUTX1Ul2gQTHU3tLOFg9SVB56y57Lk7Gtz41wKmGTVE/3LjW5ns\nTOfjdnJ1WV56KukRCGZ7tK7l5aZ/DVeXTZttTwE3tRJwZ6R2jHn/mLr1YO6o\noxxjlXjQQqBybefl7ToNNFgOsk8pCNQimwnYjV8jkRXUCGBy9Ze98dz3QFOR\n2Mf5TxIsxo3NRi253dqrF9h4AXqB9Gpvbru1OT1v4n8tAUHX1S1uKYUsidp1\njbRfZFA2Wf0eGDhz9Qgave0EFyhEl1J+Juber9GLTqc25GIhgt/nov8urKVe\npaSe\r\n=jT5k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjW0vSEIHfVyrjmhQLNucOU9kzq7KZPb+Kj/GwPTmUkwIgdfUAhR3EBp6nuzsJnpafD6AXxcSJQqgnh/SsDNoz1+c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.447e31c6.0_1586394962127_0.5285883101350652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d6dd84f7.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.d6dd84f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.d6dd84f7.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"74f8e8617851a447758cb395b1e8bd3bf4c8c323","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-OQDtHwm+iXBdCqclDRGR0V7YEC1yhGtMLeNsIOY5cTXBuHKhPzff4XNUBpAVDSoTqooIP2uc6W0933O9OII9uA==","shasum":"b5c607c668111c7025fbcdf58d374a6caa310fa8","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.d6dd84f7.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnlZCRA9TVsSAnZWagAAJcoP/3XGqKQyG81GRvhN3upq\nd4fkHadSkosu6CPYPb6eGiceW/nNmXdKhwUGcF5NLgFMHQFI/Sfb6lrsqfic\nrST25OEHWqVFJowKlFmPpEc5P1oCk9pOK0/zA5lRDmfrD6NH6MC0sb033+E2\nP+UTyys8BBerACz65h+z99kca56t2Wl+WzFhEalYBYc6aq/lAuJuMxotUXYl\nNgS9gYTT+zFPOMOo2IQcdn/lre0/7wMZt+zAyUcPUyo/qPSlIPgbTCgqjMVs\nidOgdco/9USQB5L6ErMobjhlRl2keRMnuGGqdp7sNNys//6NgUDRYSzXbPUv\nOEa0Dk5I6seNnxtNAdYCm+O2cGaXtc40OWegN7cp0YB0xZcBq5CRdQVZYANP\nQ66MNJ+/N5RuTQvojlQNEl7EYlZ4NRe9w6MfK3wd0LYGneuIuaE6hosQUKbk\npdEqB6ZD9lGaVVQYi2g7ECjtdl5OHyfRtKz1rEkV1IvOLd30mcjznMUP9p/l\nMKM9cj7Z6fgJw2ocdTxaFyzaRo8dkQXsGyLLPWZ5wyVSwhw6CI+toK4jJ0Lr\ndIpQBQDEaG/7x+o/Ejp7VeH5MqtEQJ1e9H27J5pZkIU1MmqAev6M1ERQgQkw\nyFkJyF+aIJSOZ4itmvdsOYzWWEyZ/fCCgJUPbxFm5TX6V6vZCGN0G94Ybxcl\nPZ7C\r\n=XCwh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1A8D0UrBimy3JffQ9UbwDsLhahaNUWg664VpwjzDX0gIgb6vn7sviTr1qugTCiNxBShCRw+1lHJpYMlqd2+qEOO0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.d6dd84f7.0_1586395481529_0.3439051108361628"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b03ee68.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.9b03ee68.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.9b03ee68.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"ab8e352b8af06379b151d5a80b316fcdfd6e2024","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-jnt9UyLtZaWM2/llRkS1LgKgZ+sa0ss+Q3IA85NAzYhAbOfIp4XVojs19Dwv12uy2rbAF1XVaYGq7/rvmiC1UQ==","shasum":"b0a21c556a824aa0fe841262ac4343d50b5a087d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.9b03ee68.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej39TCRA9TVsSAnZWagAAAj8P/AhSXr0D9bjJFjBqKg9Z\n8uMOoLqpXqPOIsXu/EYOF0Sn7OxoOuv9RiPo6Hyr1BzuazR6dWEZ9VT0680M\ngB8X0ftCFHaofrAwvoFLYdFIR9JTSovOz61zS4GOqzJbCg83ltEEqBtmWe5c\nGxpv07ubcyOxb+s5qppwE8uP+zbk2rA/R13BaGyI69W0mnnGGpkjgc+XlpuF\nsltJjfaf7xWi3KSX5eufNpnxtirH2JVSpaHYVZBTzGpJ1j/9Je9grecM2gGp\nVOdf7YjEf1FGJ16Gtkh2AAwcqHPeKM2yYf1Q1tUDfN1bm51Anpjl0v147V73\nmpIICFp4ablDm12j+qfYIaws/qA69y7N5WT6CKTgKriuhdxOk7G/8LKTBTpp\nBM+0CZvGSvMJMrnAi7TbU5oM9oVlQehbhydylUy7nzAv/q9QuMoZMpt6uo5u\nOzVquK20GppleEBK4D0frImqPnqqJrKscV8t4AZyfiWEiZa3M82napOUwIGn\nwfsrBm9Tg+NJf1s9iLbvhkWN7gyzEtZWHYqWM8mF9L4JfBBTpVwyE9iRduHz\n1+EeD1b9enCJkkkEM/ub4mrpN9zedZvedTYvKSp7WHj+IvVLYyL4U61FYESu\nYC4vzpIzzT14ueQEfQteAm90RRUmdrqXG+kWBOgMhd9x5bFr8ny1GhFNXXra\nLrCV\r\n=jCJi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLBcvUEta/IudvxO2TCwd4qLVCpttvzgYGyKc193o4sAiB4j8LHKuTxY0itjTmMFWbs/hqlnjtIZtWgHcYAsVi/lQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.9b03ee68.0_1586462546890_0.7354165285237537"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bbc25b10.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.bbc25b10.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.bbc25b10.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"a56f18fee2a99903e5867ab91175e4802a21cad0","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-DSzt50S4Rv1iHwZ1rctFmsScJT8FLCmrq3U3WthG+xbRbQhkUtqz/U8SknADD/LY4MtDWEIVZAEEkLLRxZb5yA==","shasum":"977f956a04d0f0113b4208d45844d8d8c2f2c239","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.bbc25b10.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPbwCRA9TVsSAnZWagAAbxEP/RPDWjpF7k+J3AVhlVbR\nVabzZbDj9Ww5yo1QKWHTgmca/Z8iPBG3KU//t+vIyUycOlRCIJCqJ2iexNMT\n9XGNbLfk9QySkdINyH94/flCts3Y97nHXdmTO2zjQ2Zv8u7Fwbim/+pg9wN8\nCQpEi1FSSFitZLelHlHTK5R8ysDvEaPjYj1h90SeRVE8whN1ifJyzhTbF2RS\ngRkTmFLco67q+3zOoRKidMgZyQCx3cjNn9BcdTaSI+Oy1c6F1mSAP0cqZ4c4\ndg1VGbtjqEFXfmD1CuEBc/LP7ngH3gZ2WcysE2YFQDD5SPp/RP4Vv7ZBGqpQ\nj0gYt3ZoMCVUuaFA5pKQ2yUba6XY8Dj5jiEU7Gxgv7ZJoyDqUICtdQVwlKnX\nOy63iKxajmeFyBXqST+wrCe+ShgRjWa5mETVT1wMVSnKWgWHbUA4baE8Z8VW\n4YeLqLrh1IJXBxLVok6bSVTgfAIZf0SBfu19bhmql+HBvhItQUUhisOoLqnG\nYB/uFcZ94C2RuuQDFbu4f+AGQQ3R9QY7TCYTvuFsLx9O8t3ANguKKJGDFK4G\nvosM7nCDXRaP8GzNGpgDh/BdO7EBCbqUG6QonR1fV0Rn5rGcStQb9aFhnZ79\nSCvOQzaaZVH1NJAb8YpWwHF/7+kMGiMZo1k/tpBxh9/u9B8qPM49F8A6KPe9\nBr4B\r\n=v428\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHlAgnYHIb9wXJWBVKY8wFbfdDEEIIbyVFnAodcejXOpAiAdalaW0Rcmd9gjVeXC5f3HrBuEJVCfmCXo7X4Zleixow=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.bbc25b10.0_1586558704308_0.5760021821224997"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.339cbfd4.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.339cbfd4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.f172b0f90.0","@material/mwc-base":"0.15.0-canary.339cbfd4.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tpyD1eD13adsV48tk2OSfv4DWuvl9hENBACMJEfiVmnl5Lga+e9FoIzGQ8w8UFSWztq306/iSdRwmFU7VhkMtQ==","shasum":"3e11ef08159f88cc69ac80a1a078e48b30548785","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.339cbfd4.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0aKCRA9TVsSAnZWagAAlowP/R1gbHNkCT/or98ja5LB\nz8JwpAtPVTMbDSTxnQlnt5FMCzlt9BPRAckez4k5UWBVhTrCF4oLeMO7NP6X\n4jMp0aIlKcaVyyOGrhHLGhs5WCO8APqeqPzkPSLPoU3O68Tm57gMML5hSsRc\nUT4yPjYceP1rHbw7KRhadicdMcNa5ZKuWClpR5IGKZbvyOwpCnCrOQSClS/5\nkg/9FOV93guROck+BY1ns+8RKFGItmZVajVyYRaVb/HhdbT6HrRF+lFje7FH\n9x3SkGrihoV3ya30cPLuCUM9jpbEYQjJbyrGGtIflFT5K8iSZaTV3PDWYrc5\nWddnG6FpnC7HPcke1izDZEbZurh3ssKNB6gPeG26w113f48uObkewHmn+rAo\nkyvCYkGsGYdzeny/WZtBZql6y9likUzmKFKH9pOGRvV/nN5a6DMWJi9oA8MK\nKPIkxeBznEYLVgggGF3lHDKB5YYCmZPBCW8D+H2slcRFbSyt6mcQ4No/H1uh\ncPQLxc5v4h+xyKFB9a3lg7rjki8stjk660OrxS1DN/LK/lWonE03UqS6aNuu\nZM9L+zr0awtrZ9WAcct0tN8zxM5q6vDpzJBm90rX3mVQ1j4Hi3qYFeZJiiQ6\ntWyC5ef3nKh0oLVzq+gtoCyxM4Ktrrpo6yA2hqc2ZgDZwIxNKxwxmP0zMUOD\nKZZY\r\n=AhDc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGcg72CfsgKxxCtl7lHO0c5LSw6YQYI9ImSkdC3eLKu6AiEAqJbLAmYB16IFAPBtsHLxwymOm9N1YShaZNSjHBX68oM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.339cbfd4.0_1586972298311_0.08410140959115409"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b74ff19f.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.b74ff19f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.b74ff19f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-q00BaMjv6+NNa8oswEw093exjzdETZdEv6XvullP/WrHrT+rB6W2CJhX2NY9UwUo5UwJ/LlZ5k6DzJENKtSXUQ==","shasum":"edc15ed440a98139d69aae3bbdcda5eded1d9a10","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.b74ff19f.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2ijCRA9TVsSAnZWagAAdz0P/1Qt9iFok/AiKBs4lMRN\nGug8RYpnoDph8cYQXk/OkST1cA9vVVcrdUqofRzJYhxAzPfUmM/uM0RlKXRV\nFiXsrkV6OSW5YPAA3Z3iaAytUs0kcECHNxVCsT2LgDvpGcPt2gQ+EsorfeVH\nZn9sjLpz9bHjPPVxKOIsPh6EbxvOXxA6F6tArXcUXLXMpLCWmXb/kzq6JjLu\n4i3hOtpPvuhoRVRqce+2noU3Zlb3RiJk8pJhJmktHuS3HcMcRq9gcueJqkbv\nQ5zLg/IV4op4BmX59jKL7L89BBtRs0Hnpd0pA71jj5uqDFHscy5hr9mVwWLY\nlQK/S0OvAxX5X5Fp/vHRRu3sXf5QRDTBsVqwJm5JBKN6nW+q7a7Cgx8uwEW0\nLGh3RyJgRlZlnkpANRl27dsApj4jYbgfRvgj7b+j80twCrVF5t/zHvH7QDMM\nkp+0uK+fvge5GO1fmJzG8Q2fcebM7aXfDSjL3W1ynGlpNYh6fE+RbacRxGbD\n0TQ592V9WpALOrzs2ekZi4e/Ee+4a19VqJQnKMBsJNZpWXI+Ea+mU2V5mQ/g\nCpfiLqzUHPWSNRS/5Q0ZV8giBS2hQDLxdYuK3HA/FyWIIHd2zSlvNtlJ6odk\npksCrNMY57biJZjL/SxGBi5ixONcI9G7kB8WnuTP1TmCAcDT6h/qDzWUXdZC\nPAx6\r\n=NMkz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcajy4fp4mrftwWfdrQhsNI5+X6Qbbvf/6L8BIQSqzHgIhAIIY2CHdZbOefxYgPP38KNAG4KFdznd5ba3Gwyfpfz5U"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.b74ff19f.0_1586981026588_0.6591203713798015"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aaa16853.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.aaa16853.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.aaa16853.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"7546404b77983a36ca5e25efc1078681498f260b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kVVnpByoaLTqnJ5WkyKcsuIHXAkCiS+8IYC7WWj5mb+o8aY/wm+yTcP01v6aJkZFHgABjQlaJrOFEyGzfMQygg==","shasum":"7d9442ca7c1c79ec4352e3fe6a18b79d586a03c3","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.aaa16853.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel41nCRA9TVsSAnZWagAA7zAP/1JkV2RayNWXYWKpVZ7N\ne988/3hW78D5i5J77MMRvVZjmtUkBrXiukwzog6mZW4rVorWntLb96SzOKPW\nTlxmN133sBoaAcP3Tg8+525eUjuXnSkF/FFG0zlUiaHOnlLgVV2r7MoICbNq\n/HfTYOA72vKaXjdbiDZaFtpl20qdPPMkmdg44L/mDUfPgBbUwUiaMdA7u3Mk\nU4s+4/KyXIbwpOM2Hr5XSOdGvomw+E2IHMuAPZJuMxgbTwMc79bbeXvzR4Ij\n8q9K5pQbIqRhiTOr2MOwYN5+0itRM/h+HL1Uap/S+q9Ogbrs2MwgScSG5xfe\nXC5p1CgnRRCrnj5MhbQQTIdLCn+fY/Lc2CJYVRvFPFDKjY4g8Gr0o9yQXlCv\nIQzDED7prE+HpHdWlsKlbwpgc0uxX+z8HNNYOUMALRyhbYlk7uT1PSfDzjTz\nAvGNYHpBazqaaNZg0TgclyAo5vXr7ORWoIDkYw2BOI3GRTDzSy3Q8JjRJsR1\nE7gR/iN1xkSJ60LnFuNr3F/YHou80a9/VlYUQeiA0b9K8yu5O5RkJFBHahhb\n81LO74nd1ACudLzM1M8Z/ntXQfUn3mv3KQrfLl6ww3hYyrr4eZN4zIg0vMPn\ncVMnCVG0wrrqLgoHZ+CV55MrQBafN77VzgafOjVdpQ+LJlJKhzuvEw1KQsDd\nnxhN\r\n=VBDU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClc7T9DAKb7OYcvt7drokk1BoQJ6IfgQOF/iAK4d35zgIgTN/lKpszDwdtdgjDuXIPwKj1yGRaJWKpKABFGhcpKGQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.aaa16853.0_1586990438869_0.017921785567756254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.826b23e7.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.826b23e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.826b23e7.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"00403df32c75dc9e2a64a38be1eb1df45ecc57ff","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.826b23e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Yy30u2oLccYCOnLA6ddJC1UiCHCmKux2Oh2zlTFhly9FOys4eYxkX6QK2qTXJDqsnVdKJ6IEBemKib1n1pDpfQ==","shasum":"ab6d37ad402f208ac18f77c36000c2152dcd5e6f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.826b23e7.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKpfCRA9TVsSAnZWagAARTcQAJdi7JFGx+MG9FIkYkA9\nUcx4wcxsHwulUV+LRsry9oAc2Hh0JJS3IQvAQ+5dW4W5Isu5W7N3bg8hpyx2\nwnjoddyBCn4c664TVAyJhU6Yw2jSi+g7i9aLHwQPJMcoo68NF5XfmkDHxEsN\nAYrR5uWtmlv+eUZ58e0RT+OVXQ2H0HYEXgPKlBFZCYqaeUinlhuY1m3m6SLz\nl5HGl+Qjgz1V91KXXCRDJ7+tBUjQN+RA8rX0snx/HCqoOQM/a+xDz5mZllqk\nFgFJPQNz0a+UUFnX3dXNoJkZJWu8LO2uPGFP7elIL/DBS7EA6JCVX3BVNj9k\nyuf6E3OlzRyQqrKmOmAKveTcHxqUF/EY41iNDRHoS3zp21MNEGR2lFzWBqTX\nnWXyHvKHHw3ON1X9QBG02MqypfzSHodPzR/3bZy2oNCXIY0Av3x0pSLMm89Y\n3mf62jCUGPJBVoQCMJn2dR1CADKlYQjFuBEroHe6GeJiyyEp1jM3VOdQAVsS\n+2vKXB+5iy5EO/tRB14tSZUNcHftM6lub2YDv7WtlNifjlqfPbjMy0o8cZ56\n3C/cMzOcULJ3tdPh6lhWolOHyQ8XsyywpbzKnIOeqfeaVTg0hLVwlRBKqoCp\naqQSrILOLnNhw9r6/Uw6v5P6CAnvyWTSSgPIdL2Udy9rDC5mYOaJQOs/90iT\n7ex3\r\n=Z824\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8PpJXJBlwrMUTmM5TbfLhY2XdqF8Fj9JCHHErtO2xqgIgfkeI411BKrgBE+miw1ZY06MV0UNpeFLfsbkB+i5TuxI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.826b23e7.0_1587063390749_0.2737772821872255"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e1ad2b2f.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.e1ad2b2f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.e1ad2b2f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"148a509de33ca1ac17781a9e24bf8735ec5b2874","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.e1ad2b2f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-sZWE6D+Y9hUigvIi/447Rh9NoILLC1OWfebpDmLh+9mcHJNNgjqPySn5BwXZYJZNPyXnTfpN/IxmxXDJ8dSXVQ==","shasum":"674fb4d63a7c40746ab9a3e7db6c2efde4467b1c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.e1ad2b2f.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjUtCRA9TVsSAnZWagAAHZgQAJ0qeXeYRo82eJfYxPnN\nGYefcIOWZVaaM9t1MdJkwF1sYSpXvx7tqmPG77ryvFZHhfvW7ZhovVVhCi5X\n72UoCW+0sZoegQ6UXSKbXRERlYsy7TW/WMJlhKz4LK+PDqk37dLZ+bNjYKqM\nL0KElNQ00wBkvg7cGU1sKy4UkPn1WjREciiHDSlhFjXOJ3f2R/h25hDx6hZb\nXBCabRYFKlSBfpk6qHGdA3HaZnOXuof4sVQss85RsXlw9Oq32bmwVdnOr8de\nqpBCaWggIwfglsq3nBGBmzTs48U+gI0PyiFu5tUy0yBamW+2VMdstw/979XR\nBrM9bteONdOZC6RLVMswn9xR+G3INOApkwaDs2at3AQs/jZo3N61tiPGtGiH\n9MrfQ5hL8jDzP3wFJ/QaujBJX9nzuLRCQZhLtH7gKe9RH9Od6/l6NBgk17Y4\ni8gRcKz2TbdWJcNN9qUas8JScE+jQDNRPPwEJJdiBYtieozcHLQuzntdkRpt\nwYuLnPYmPzc4cvQ90sF8wQgZkPPdt2vCMh0V2BQviFNCOtJ4dxUZsoOuP6yJ\nvJLRMMrdP+J26K+KXVVlI80qY6YH5KbBHbHI/ExT0L45blPPIgQ78/UVks0J\nYvm99EfLHf/mmGidy0rVjryrdZ9ghhHYo04lTepzuuqISRw9JZ5J6aW/Exfd\nmW3u\r\n=3NVw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBYwe2dRG1XTTN14YgA4/CBBTFGRkO6Mwf0FMWNfWpdHAiEAgeU/8X0nSc3dOkN7coRAOeyD26t3IBOhX/Q+zBrSfvY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.e1ad2b2f.0_1587164460838_0.024645273602270645"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bade5580.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.bade5580.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.bade5580.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"6e463a20777b8cff5146a68db7bffe3f5aa9674d","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.bade5580.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0Q4JSCSN8E++E2c9A518x2M6rkz9XUOmZeqMwj9JfN1NfFavuTdsHfuQDyPJR5TzCCrCcUUybxZR6KnlpYBieQ==","shasum":"fc03ee6776c59f5e9c3bbfc167225c767feee2b1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.bade5580.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjlcCRA9TVsSAnZWagAAL3oP+wQQh57yv+tXq/VqC9oc\nozWuhbXlcBEIzkgCdnkcPfIWCgwbcClfn2KUQKCTWzaYq6dS24WzGX1Ymjdb\ngErNtqBuv69Y27YNsCsoB3fvnSeLVfpcokONbnHz+b/K0SuWuHV2d66zewOy\n591LVY9pZbtXMeG60FbKuL9xVyzYmj/mNJYYSqjgvq6LsWlrqnF0b5wOqjoi\nUtBBuooi8xFS10Z2t7n1meyQcmdfR6ZrdE7wV2yvVzdRxkZRw/z4eChdJ3k1\nJFOT9MDdvHRlzIBvBA7r1n6ZFY8GItHxA4Jdb2HlsKsdxqc7gY0XbhtfNKZ2\nkwGqxZBN3WLxkXaSrmLg4qYg1kTkbvfmTITidUfLznWJn4Xpf3TPU5oFJKC9\nETqFJqvSwc+IMv8wJJFK4i1qezE2H2W3JHg8q9rjL06eSeL0r7eWfRAmi60P\nC6ki9C6PJ6eJtYVL2E8hBfCJ66K/lq90xUBOtLnXb+enTO7XDMoMIYyn5Ab0\ncuPaxQpoLtkfCylcAnge3LX83sDxYC1RhBYRbbqRhNYnxRw06WQ8qeSH+P1O\ncgvwdEYdKffLoU1C9P4dN2n+i+gDf85jRUf6MUv1qXoKlpZZM6Ghm3TklUMH\n0vtBc75bvnVHHlEhFNafqcmPMsqLwO4KZA/zUCQsNyoEcQQ3k6GPjs5USDx2\nBb0+\r\n=/HBI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAet65+4FGJYoWL4kYU01Nj/0pB4IZx1pZDRFKyKBDf/AiBpX0zsyuYIRUV7RYvZ3wSlCntkpzzBuG5TTyR7w2PAKA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.bade5580.0_1587165532138_0.8386845876483751"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dae38247.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.dae38247.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.dae38247.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"b704c816f10599ee9a5d9b89a55d9c95d2e36f4e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.dae38247.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-AgWH0AOSh7pDrGX1mm7Bf6wNL3+T17lGMRl5IYVhlM4WyJMJAvwjdeIFM8lqgX9OLGicrmj0d0Ylwf1XoeS+kw==","shasum":"3ac54eba2a6b4de47df633ddb63b66b0b39a9906","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.dae38247.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemka1CRA9TVsSAnZWagAAaXwP/R86Ts9bkrWnsYvbYsnD\nD3YyYc2s4auLNko5FWcMQiyg7OczhlkIDi7n37R7wrVMiOzGldbvtS2E6iPJ\nUc8CLlmVJOWt4Vi6KACXTnWDC1y2Iw3FmatEio7STz6+5UBIYZGcKcdqqb7h\nX6rwkSZBUouLqosu/VLBJ0SNHKYnzNAqG2ifyD3EXpKtEf26ZTv9Zwta5T+H\nnZ/nRRunTTS1X8cXMLlAE6TorSicfLAV6mJ3yVgbMNcVS+ZxMko5yfqZvy+h\nbLV37sqVBxG+M7n5oThjdsSjZyAIdWMNSt9uAcwQh1pBj0aSIDQT7zx7pxcV\nKM3q1zj1OWVi/2SZISullP84++hfDPjvo60EM6dzMhkw0UahGTxu16/n5K/5\nVmn3P0eouPpchVj1uCV/6giW2pwiwemFsCktjg1/0NgdcbCWmAmD1ECZR52O\nIP4UUb3j1PBDSOCR11UwU+kxd+zGdfS39r8JzylwsMjbjEjXBJy10ZY92Aqz\nkD8olOuoWARo1dGKva+Qx8g+0Lwqs1Zoz0rda/98Ngjb/dblcX+cAQ1BvQyX\nZFg9jj5LRyQh9G0phjvddlRSlsvWbRn9Rj7prbFAmvw+MjiKtqLXObsE51la\nFaFlKAZ0a2j3df+5uC2llM3tYHZQ/LKGYqBgNDuEEGDHrxjOJMiQM/0+IjLW\nGatz\r\n=N2VQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiJYXeEY6otdww8PUhodTf1gGOuqTSHYGnuut7guYsyQIgTSzcr4FjOuxugI8jYJfb0p/8o0eB9DkZnrF2tW1k018="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.dae38247.0_1587168948981_0.3094372315746765"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a04c0b82.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.a04c0b82.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.a04c0b82.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"23904437ed2cd67305827b08d512e6dd06858b16","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.a04c0b82.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-U8dANP4MUtu6gVU1TlLJhyYwxAaPepA6XbBaLe7sOohSWKk773U/BcOIoWFW4ftj85EDx3bi8sp4Mmy+bp3t2w==","shasum":"a9bb5d4973b5cb6f8e6b2564c413b1a29b0544b1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.a04c0b82.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkr1CRA9TVsSAnZWagAAnBYQAKDhBNCwFKBAQgy0DaXh\n5wrc7sbsQy70y0ftDxX+TId0Yqu9YTIuC8zLsr6C1G1Y1xH8Tl3w0TBv84gm\njCFfuCA3XxItw+i5nNG9gFDISVH7r+69nf1YV2tgNcI5bwkQEqsQZMPQOj5z\n4kjsTT6RZW14rVd5VgiIB6xAK+Mgs23nvhEzvel3397Hz1Ny1uf4Neh6TDLm\nUv2lX0eZgHndyVAoZBKewPRjqcouD7VGHlnUharm853ZRWJ3cIgbo9BE5dJA\nQJXFZ+ADnFxD3T2TVaZsZVCJLQRzQ2UtYuw+stII5UGa5paDnA0UpnU1bnNP\ncTCi3Hd7XVEewFMxwhYk0sdInv1u3PBrUntJlr1pyflOLjRdaSHhrL/c/bsX\nE56OY/FeftSW7D6gQJHpHmMIKM/A554eFkzr3dZB0DTLJXKrRE4qpEr0DPhX\n6ZrekivOZuAQXG0UQgeBmZ5NDnbLgipiIokXlgfIpRYLYWTbAmXBQ2WJRATV\npe18NKZeqiZavSI1hJu1bZld1xnxKdSngJbW9zJgsckei81QSPcbzrLc+pTU\n6SBhQwdcXhncCOUhzU9VLRU1ZR0VwUSKEyUc0RTE7ZuwPFhH74nxO7742qTw\nts+PyXAUuYFxIHbZaDKJT5gbAD97HvauZyOOY9iqfrHsuDB9e++YGhrz6a5U\nXadj\r\n=RUmc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGHoiEJDVc+kUkpWOhqbgkAN+eMRpLhS0ISQ62g2QJfHAiEA4j9BYLDxoOiqcmEB+vs7jfzNhpJoUmAh0TP5t1OzelM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.a04c0b82.0_1587170037224_0.5662185398495019"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.715decfe.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.715decfe.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.715decfe.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"ddba034f53f308afea3b1390f775b49e8a473e91","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.715decfe.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Y3NKWK3f3Nz09nGU4ledy8JsyIju8W8OykR7u9Qf/2xmjHU4o5TsdEPEx8MrRJ/1fG89iqAJD5wWxr5gLYttww==","shasum":"8510d0c5651fad88531ada4622873769ad9fc7b9","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.715decfe.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenetNCRA9TVsSAnZWagAAOeUQAIDX2rn/w7pSHQWwH/Ca\n1Du1BGrzR3/F1tEuZmfm7WvUTFz1fmOxuf6royFqMB6GiXsWBivBIVaLs6tw\nnsUWv0uhneTk7rGm2+2xaIcbWm1Ir3iuzpV3eo+Dxi8HRPDXyjZzFUNCrpPQ\nWKxQLKNeiO4/n/bEwjy8ctu11CJhaS5/dZ7qCbh8CJrx0qKnI4XpV/tJvPGa\nRSnspqM6g5PBWPjpAf841T6psnRir3o5DVs9bOzoUGwq0pS38CZRDVAZEMeN\nvDRE/xjyajbjRBuugJurKEE5B0tq1GWQr+ho2ik9yhc+s51c3hvjp3jrZxP/\n4i905kG0T/0gwHyIcv97lGSRME0qUOCjkQ/AMOGEw9cenMUktPpMBmiFO6aI\nH+KE10n2tzFuIl0VXMABCSXogAo4vSAyb1DZtGkX09wMbOWg3O1BP4Ktfd6f\nTXDfJ9evwfYDalupXz/3e3tlc2QLrSo78GDKQ5UYrIYL8PKqRAH5gEXNMCh4\neNkrg+dcMlpaf9m1RG3sXiwsGed2EFWexuzX6mdWUn2QTezqlMmy8nLCwPPu\ngIeu55RmacciXf+LR0H+V/55OUOzdnL2IosPxSbb182Yq8sun6Q126A7QbJa\nuOUDaD1LFYuXhMwR5g0PO8vy4qjoNR+SsGDdkXmkiSp/mVNtd5Uly4hWd1aH\nrzeJ\r\n=dO7J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBBlZC2FhejwtPoUA+FZEaWzzD1r8k8RHWdFmjlrhE6cAiEAvNF/v9q6RZ5ckIIQ6Y8hj2uMvze8YhuMRKqZro3/t6w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.715decfe.0_1587407693350_0.31167214405644383"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c862cd04.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.c862cd04.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.c862cd04.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"59b73d92f5709c37a2da654102a61dfabe148db1","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.c862cd04.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vzo2F3tU/KVUHsgwn0AXG2cFkYe59n06iEIE+NUy+Fa31RwtpkUm6FuT1u9kNCKFx4X+nhyhMlwRCC1jb74eiQ==","shasum":"9122992da196c2ca19430c310100f92dc7d47969","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.c862cd04.0.tgz","fileCount":16,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenhU2CRA9TVsSAnZWagAAKE0QAI/3FLfkaKz5pCvBHf6s\n42zOJyM0bLH0LTtqdFtpToDuaVfTBDuDJRxs5Fxh2SEIur93Gc/mFAMhO4nC\n12+fuzlJJXRQIKV2ko3wkzU90hMltj8pnq3E+3WTpp0kSve8TOZ7qv3xSIR5\nf39ATpwPYgKBjwXd5d1L1axbbIf+kCyGuUFMJ69qOK/yzHIrFqCaVLu3XDh8\nIoOGAsbLOuDXLg7Yp8k9ak0Q/KnazkSY6YBJsau91thPnlLRwIqs04ruAnCf\n2gkJAONpkQVJQD7pSXjNb6IDl15TuvZET0gubi8a4l6T6fFMQrKL9Ghiabcl\n2Dvme6A65g39mx0vmgZJNoqw8oJh2g2+pHFNlsdnEOcEQbb9zkEi4vZJALVn\noP6hZwpvtSdHejSZr9f2mO+QnogNejo32MI+TOEWwhlIGa4hHlFhX+VGTkiQ\n/XQdJ9IWIHeb23l+WGJoZqgKwHUYKri9LAY3s8YgHNOQIMBzeWvAauZYXm87\nYEKmpysRyiEV5w/5BOfp0zpyFLfN07yyaY9q4e1OCeUBSTPumvT/7YRRaeVc\nzp+IKStqY8Hw+ELhpJriWGdh80+cS5zGlfMSK5xt5g2xuGQB3pFSX1mcn+mN\n2VHBmZ5xy9p/TKs86oS8oYP0M3TBcdQ/5YeagOAJAJPCoL1roPrYA+vvJPni\ncCfC\r\n=TCND\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEBsaaAj1mb1CYaJ5QK85NgU3qwdV+eWuVYUVm1zPkFjAiEAj/+fxO2U28yt/aMxZexBeBPDckuPiRMw5c38u2EBG8o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.c862cd04.0_1587418421975_0.3398635086012458"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e9b01b35.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.e9b01b35.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.e9b01b35.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"873703765efd3bce3e325a39e56707cb2a7c47d8","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.e9b01b35.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hgU1xev/EISxwOBs6ManH4t//eBAtLiN7IZNKZOll3zjgIFJONSGuWSGB6/UYEXnY81744px1UvZ3/Wx2chh9Q==","shasum":"a0d61850e72c2e4b2286869b18906b0fb6503128","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.e9b01b35.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenjBACRA9TVsSAnZWagAApb0QAJOccjVhMtENXPQxPsnG\n7G9cRARMhfIZV9PpDG718FHLVLNh8X3xFVi0IT65yZQlUSh1uu03BSD5Hno+\ngd3E+85Z2eLxMlLYjXhOKdJVAy3u23afZ+7aC/mJ4ROqqvQydwO+GDqKchEJ\nuqDJTYQ4v1iryXPG/yiLA/BocNM4t7mnd/xma4gQSTB3/wsUSb3rv97ZFpHy\nZclywhvOQ+atrM3JXkx3QAwKOb+2X5pwQn16cwpS1MsFmGIC5tturVS/iHIM\nCaGSeHdRJJekxWTQq46ijU2mLs4zwHcLjic10xV37l+VDJG+dqYdu4MWk5TV\nBjJzQ1MMKZQV0Bn9kbPw3upr13HXQ1aExFzDk1Jh9pJLWezyrtxJ4wy+yTJY\n25N4rFW5iEGr6o36I2X1i5NJ0OBKt/Eq/UzwMLOlElOQ5wfgq1qf/veSPzeM\ne8RhlENtAR9LxRxIaEorvwM7omS/PDbHeKwDIeIhiVpTPQuQ0eyPBx+6RRoo\ny9NhtIU5TbYE0jQzNQPskq0Qpn+6Lq12ibS3py7x/5Wqhcc6FTBS51YyE0qt\nV2k/Uzto8/I3stpQovyOT4vRdoRN/2Q0/e9SmXWuCwhJFh77ct378GA2J7tj\nOuylXYisx7WKFq3Nf3N65JZwoiwoB79ycNTWgdlDM5ElTk4ONXIonYMHTs3/\nkGk/\r\n=kHcg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGlxSCVXSZDE/FqOP7J9bP7hwJtyvNXj0PcLjz/fSZ/RAiBNDkek5p/Ae1+YZfMCYo4ugNz/f1ptjeNc65jh/PmnoA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.e9b01b35.0_1587425343733_0.5586753486934306"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ee7e8989.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.ee7e8989.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.7b4482402.0","@material/mwc-base":"0.15.0-canary.ee7e8989.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"3b58236c5ca9326b11d092c5b9977dbd601298a2","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.ee7e8989.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-XKEjoXIrJc6o4P6LSXeHQmmxLCVhXRKhxzjxNg6WAEpVbu0sEGPLGPYKbYCgT1rEl4czi1RqjqRLgoLKVDBAFQ==","shasum":"152d78e9c2d5f65cbd7c21778f92c95ac762d140","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.ee7e8989.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkNsCRA9TVsSAnZWagAAGCIP/2wSsUC8rHwl4AzGjOy5\nYDJn6rf8xwyIgE4iVbS2+FXHvsU3RIAPMgwTh8j3BgxaqIW+WOFKRtnFdnhw\nTYcOBbrPt0D81J3INpRNsAc2zeenN2Jj2/euspjNv0f+xS1pT5sTtY65HFcb\nTA7arM+faZSlQnisOlbn2/+73WS6E7Pzpc8v61vWmfsxggKlXiCh59xcIvaI\nwKvL8XA+pImxO65yNCX+OueVT4OsnS5NeMMbKmXx2A2qBiMrVoat+q4xHSMc\nCBsvKHh6Cp6GSns2YRmlK6pCNoipHQsgvsReLF2NxdnAZGpB85u8RTcfEsov\n0/1SC5QLyzPQQuzUzWH6aXO7d2S8vqDssLF6WR+bkqo0OQEgum3o1FO4g6W0\n8FWFkVa9E1zmtCkcojSn5FX1U61wlsrgtKDu6rJCbcjqQWiSBEv4GjGLmHJK\ndCxYUP+IJdTZqO/DTTZADFZg0NVMeuQGweQFUeK4ynHfdeKlkkgeqXaOKYpA\nnPxPyqlMGxKXFYOVYTKBVqPuh69F35LjZy5WiupFe8raZrlua5Krn8C0dFNe\n/TmmfoRmb/9jafI3IO5OPppGfL2i4PTaa8Wv8rKFSbj/RZlx2vW+VY6lwiRk\nhvRJcKciYhqUv77A27lU1tj1wy/eO4istqCas8JY+lsuVOfxGO44r444Ss9M\nIRY6\r\n=2GL5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEzvhE45xv4ufe+h4Gix9T/zfIuTefz5fIGA8zCz5ji3AiBqkdgnPmgsSOwwk9qKzQ5pmftr9DWQm0Atb1kyzMbQQQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.ee7e8989.0_1587430252342_0.796985518230408"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bf47ffa.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.9bf47ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.deda86d8c.0","@material/mwc-base":"0.15.0-canary.9bf47ffa.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"282e30290957ddb18c6119523574ba36c65d7abc","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.9bf47ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-E1+ubdrdSN/n8V5+s1pWCbJksVlrlPxddrr6SnUuClgTVlgqODoQVWlkDNSf8HOFgeHbWft6xlweE4zSKp9lOQ==","shasum":"7b5898a587b3e69fb869995fb4aa399602622659","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.9bf47ffa.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenz1oCRA9TVsSAnZWagAA3IoP/ifHNjazSQYs4p7HBigo\nn6q6ftAw/Uc1XmBUU8o5hvJZw0rLDYN+tudy4rcs9SbA+p/kQaps4bFdyjb1\ndwUSvB8GBescZHsRU4W25rkkHurw2IjdXx3ximwFfdR8dJKN1nc2Hqe0fP4Q\nHqT5848vGW/Ns5gnMjxjPlpQjXZPsYgrI+EMyuyg1p7AzoePDJse6/IwRPt0\nrkoOdoRrqwz7btQP3UvWm3wsOYBIMSON4GT17KpBqoGet3gDRmFvtdr/VhpG\neYbKm30TNI12dNxUWGMMn6rwYP6G4LhAKYoYR4J2hNxSHP+Wq2cKj7u3mwqE\ntaTyzop1whPgU1DPHaF2O5sjs82L1r2mbCSz+A5rU6j0VzGBlif5gqCLHfAg\nSH1O2mwW6C//9bhTjcRGj9jVLPPi0ag3QkEd3MUzIHZr7erC9/G12wQ5oNBj\nh6cGi/005gd9IgPuD7Shsp/yzjptZ1PjJoxnH3meXOm7IR6YNd804U22mKUu\nk3OZmDtPMG2z8JQc7jyA1zNhCGW47sXtNoQW7FYGdS4gKNxeHz3SeTfppTCE\ni2q4W5Dsuu9mtTIL9QONdQhzJj0wJNo8oI7dsgtYKhihk127PJpU7EjkCgx+\nECKUDDG8ZISYmK8cu2imh9GX/yxtt4XEfE8lYRb83RlcHimZ3TxESsz4v0Lv\nF9Jm\r\n=gnPt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeTyRbTgPw6x7gl/z1olWCnnz9YEVc27yfSz/Xj2/bwQIgSwQ3g+LbqHW8WbxrsPLG1aZEE3jafyUF2ySXpkqMo4g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.9bf47ffa.0_1587494247697_0.7524499396814031"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.078dbd98.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.078dbd98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.078dbd98.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"a45b9b95a7710162ffb06fe74053ff1d108d5684","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.078dbd98.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ENGmKZdbt6BQl96yb6bCwgCHbDnxqt/Yn+JYc3VBginiK0GfUheKOcjJQa3gshDO5LEB5dQrI/+VaK6mwFYlZg==","shasum":"d778cee129a392b9dfd0cdd9430de1d42df2bf01","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.078dbd98.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2GTCRA9TVsSAnZWagAATKQP/jSeLcGkmaRy47o5sE0M\nNbvbU9+fJOqzT+HdbNGD/9UYRx97YE6XR11ao6aRPrLEYi3G+cY+x09puJZa\n0/ohIV7ESnhnJINwjzVGfJNXWXRugiAmi/5Z+G7dUT5sM4IMSTVYjSmBXLCu\nZ/q3NjXpC1h4iQHCK2aeFvFaLQZhHXMThTePw+iLAZ167ujqqEpefr9I5LGN\nbBhHC72B6ub3+9z+AFZLbkSlUOb2kWfI+Ge+nfnsGp7wZ5iW45QnwWWs+mJ1\nrgdD/rJO2no4cyqEw6xToMjjVVuEbWwWVy3SHZBDDrsv/44O57nED1+E1glq\nSzy13sk3BezHEWscDdrKHWdJpypt7BbSEx5+8wGFvRA+UXSUE3MzF5B4IRsF\nWaUdvKtojZfXE+m3ZEn0j7fGkZOun3lIJ32f4aOJ40NAwk7lGBtKfGG2vTDH\n3Ahdl/i+K2zcAxj+bT5fqgbNvWcTnc64SOJNHdlClkxpGS80WXhtg0YMxYyu\nIzrQlEGQ8/HCZ9wN1zr4DEkM3GI8gusJWvFn+1FcUHj+V6tG/IGBB3WlY0DE\nn+TC91mM4gpkYzsbiPD0Yw2ZLOtZz9HGLg/o+gFEOEagxuNnZGVYYD3HPpHm\nnzShnIO+uHebfgs4LJ2jBJXHLLWKM/jZVF5WpqnDT3mM5iZVN/jiAhLFSDYd\n09Lh\r\n=kQAY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGMp4X2GVx/JBvn5s5oT/Jxarc1KZzmp2GvEg3Pv2Gp5AiBJsQBhIHdeWZEbpYB3gogZO4Qtud8w4GZUwJdMi0UOXQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.078dbd98.0_1587503506844_0.7420855763049246"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.953015d6.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.953015d6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.953015d6.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"d875e6d658b1a3287b35d2c77aa8274d9828fb46","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.953015d6.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-S5MoNwoFCv6k/hXBK451vqvoPTFHfhPKDs1OZPVkqv/xLvnXqBT8GGggEI5fCkrhteNIVLGsF7wtihYppO8yiw==","shasum":"84dad55cf01d9b746e4fb1f2a601d61741068d7e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.953015d6.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2cSCRA9TVsSAnZWagAAgz4P/ioCciCQ9Cqi0Gxbkmxh\n219VwtkLWuddKquaxPR2/nBuYt/zD5dS5VJixMGroHDadp5gTCBXeXtaxUTp\na3EL+ijc9mshffp8EkR62TQpCJ2UZodrUQxaXPmSbgMlDXu4JoBJ4wSdirTb\nl8PIsP8dpbjfdI4lzFnBslku5Jo0VzAwfKr5tZNC1dvNzQM6z1pmo/4wG2zY\nXgMcl0c0Uoqde1zYnboKpoPNopO4oOwJXEpwDjhp4CYVEY6iDfIl+jbgfgs+\ncUp8/VTOwYiyvPxZelLmWEYwv4/Q5NZqN30EZDXFXVXRaJMvbZ7/5/XqX9eb\njvle3qR2yRfIGeTMj3qDHbSHKxy9MoFjrubWwQ070VJsnIdlopcBZ+CW+XXr\n21Ei9XiPcmjTdhMgc8Jk4tBTab3rSvm2S3o/lvxr7PvtLI/BCC5Bgq4VXQo/\nKLZO/iln4wOo5p8Pf6s0Qj2IZsPDZR8NMovqHUN09ZQ6vJmsmGTfi4Xr0SWj\nbW+n/KpSqcsZAO+1lSqFAFd3D0zj+KkM0C1v5rPnDHPwFuGUGR47VS3M3oC0\nl4pfqqu8NPvxuRXkjJ4ko/+QEVptl3meEtccuscPkKXxppbX8ORTYjyWHKCk\nbJFmLpSKXKO9gxrOHWmdzdx2mu1Uvg7dWLQ2c0uUmkJJUvfY3X5ErZmCeNXt\nzVP5\r\n=I+5k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4TnrEPnCcpdmdIV4pa1+BrRv5HuyTTEbZaP2eb+sO4wIgCoCfsPI+gUAc3yq3WcuFwVeyYwwUwQSKfgADrQbbfww="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.953015d6.0_1587504913670_0.9239432642784478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c360ec63.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.c360ec63.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.c360ec63.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"5147ccee26bbbacc14a1d7d86adb845ed406bbac","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.c360ec63.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5VDFQlZTBDOIgx6hYQHadS9wsaajPjRECaql4xLZpO4eOitlgFDqdW5gklUj8uZpR+o6nhAOCgUae/u5SOjvDA==","shasum":"b1c27ca69f7b5004b387ebb19b7c3e1310efb862","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.c360ec63.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2yGCRA9TVsSAnZWagAAYfcP/377hsmwepSORAcfPXVn\n7C+nAnG1xmcJIR742+CApXlMtO4smEemsvhvd0uQ0HBpc4lv+NP8wqseg553\nxoiQmpNo+zCQ7XCjYn8GxUZAbpqnczeDy+a7DBBqSwgDKkhh9Bze2zcE9hpO\nH0pM2AN5lw88qkCBuE1s0cVNlkWxV8VdzYKjOBjZJeCuQLp3GbJCEeGhfNgF\nOOGbwZYWE+yEMN/R+pJMlV4OSNOOl7JwIZELkx9w7bw7upC6JlMKUQOM/e22\nFrbiN6drtxp7kxuqT/LkRF5Thurug26dmq7dCLlDGe4cB+e8qRfqN30frVOh\nGGe9+r+lc60P29bQIDop1E8hPTE69buicT9GP0fqyEl/Sg6v39Tfe/WGu5gN\n0J1ojF/FZLikySjWnA71KZQvXAmu0glrzfb8U5rprTCLFDVIce/mABe5SHZj\njQme1zCOzBk7WoUxwfX7PuD0ANhMXufZen9OtZQL2fhxuquI2oYnXkXf0b92\no5ZEi4PcpqZwtLWQUvf5gOsrvZ9KdImMjVrP7h/aWqMlgyS1Sh0o7zCDpLah\nk6D3Y8aDMcnT3Yjc6XnDLQe+T3wAxLVAUHDagzPrhDWATNzAGUujPs7Xn04L\nh/mVdzInwtsnjyOi+YN76K3pK5KfdbOcy78lIH5DfW327DX1kBBb2m5Fx3WZ\n19px\r\n=rG8p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFwvY7QeC74ED9/a6dcBzMRIMtezbqgQoNHgIyGokSEEAiBHduZ+PDchpbTo0teoD1pKVSWJEgQ2wHJ/1raazZeP8Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.c360ec63.0_1587506310147_0.12695308604588096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d71b65aa.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.d71b65aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.d71b65aa.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"5f57992160b26bdf181837dfc0b0ccac0425b3a2","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.d71b65aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Vzegd6LGKli1afB+cAyozwd0PzmpSY47W+wuLBO+6pV0rM0vL4q+b+8atqysdNfNI61nt3PAFuKcjKp7c27P+A==","shasum":"8f38e96b56ec977342a243f6249593a26dcde3b1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.d71b65aa.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3WfCRA9TVsSAnZWagAAEUwP/i6WPO4N56sE2a1qS6NY\nT/wsh9c6e4PTrQnI6eGvVpLmYzb1YmPJMgr4yXpZT8OIzfnEg1bruJOEvv2H\njGdE7zYqS8zZg4GZsJBAioAMMJOLRIklVoMJfhvv6XMfjHM0MQyj0hKaejBh\n4VMRR60/9PRegsXcH9EWakhQ3EL9QR9E9YjWKtT+MMZDpVc9wMYdWzzpFKkJ\nv8z3XsV6gWGzJA0YqKulMJmAToWhbQUWa5YQjMyRveuhUxk1cBOqQeebmcby\nXqGly8B9JjXmhGfoOa1+DEM3vBgBdgnosxQo3egc2L+KDCGRUOkCDzBcNIfx\nBbY6a5hDeJaPbnvDUaf1t9mL+23W6MbNFdm+44IRfQOmEpjiaiXnYzxBWG4l\nKwP1Tv+Dy6dCydeDnFfLZsRk2v6ql3t36Gd3Ia6SIbs9yHOEOUjyJPpXF392\nb9k0sKhfWEvHtRmxQuxBMtUeFpyyCuW93fuusyJb/rNpEwolWSk80EYc18th\nbsy+gOlzAtDiQDLjZA7mYCGblt6NWqga0gm6x1IKkZtQuiKYpToCA0XVGaoU\n7Sah+0cVuvKLI+94M4qKHGPeqWfLP5PQDda2IYV+kZu6Eqa/TmdOJylNYLCX\nAZCrysvMB3NhvLqZdB2xVxMw4XYJK32D6tLUCQLPSyufR/Cs9gLNYBT+Go18\nvBiX\r\n=LtxO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmBpTjb8xSGTC5D+3Iw0aPJUzUQiAuuLwhxrM22/fUdQIgLs90evRB9ovCcPV8b+UdJ8t+rPl/AH0CaqSEbmSN7a8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.d71b65aa.0_1587508639156_0.5203166166438422"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.58d51135.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.58d51135.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.58d51135.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.58d51135.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/SODOPcN18xj9ctTQVZzespmqACF1TiNVNuziobAHrVvt6s8YZ/RxtsFCH0OY4QaVqCV1kRwJTx2ZXjFtyFoow==","shasum":"da91a103ef0e4abdb80d22099550b78be68e124d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.58d51135.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOTsCRA9TVsSAnZWagAAmNMP+QG27omZ2oonxEWKPoJ/\nI9c375RlesBs/RlDFycMv9hkfWcNaz5QSKHDPqRZYuWv/iT+GGzUCZ+3X/zf\n/xFo3gle37QNSI3Q4B+8wAR4RMkiUMYyxOmsY+CqUV9pLEl7MiplwqMkVHgI\nF0PUnkeYUy5hTSIJmORg/bk96GFO9k5TPSEjLrXJsM/hlTRAf4qzhkxxRM3p\nBrD+kFNJeOsrPBmrwaBWRFxoxJTCNvmhbBFCgEfE4gPDkEcP0YV4Cp2a4aaK\nA6BFjxBX2li1Phr69yKG9SfELvVGEBPPqaLjU99uBd+e4J42ILBFjb9j9tzr\nnJu85+ryjqUEjY4m2eG8U+U2crbwLLtaZkntS9c547GWil8f+ENdTEtKkS9W\no/jUIjhrfwK9HdAptDhLJysLBbeL5qswzXt32ayAqqUtEs4qlN8AjVATmBD6\n2mofk6gC2RLko1OiaBZDHoy3pr6D0mmZIRFx6JCAyPWpi12JPZExqd3vrXnN\nsQ/zcq32QgXlc2/8jRPNgLTSumaJaHYxNlLbGqzhO3YIU2Gwil1jFE+xdEp8\nGiSiucdvgxwJAiUr0g2QT3T+0eKeehBAykZwtJvoL7UQRGrq+7lTKTl5yhcI\nIcVox/0c+p8AcTcx8IyKL62yQoaLklBzmmJGmld8NIuOqKsge4dXlT7uDOH6\nwD+c\r\n=uJfc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFN49CS3ifS4CwSGmQxQiEgD2PKsiCoIpOeKhCGqUNNYAiBpsqRRMTfxNkNjevK1CE+oLqtS//4941yZ/pgBLWdpAA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.58d51135.0_1587602668048_0.9263430364288141"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d0af8ba3.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.d0af8ba3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.d0af8ba3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"86c71b26d7f2ffcaefe79c4882ac9867bef12b0e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.d0af8ba3.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-p7yQ8MmbsCfgThyNxZRryhNKqpSBy0SN1+SKk3G8D1NThuJrVaJ3EwCr6q4Kjj0hV/KeEhoYZDII8seTL7M82w==","shasum":"8324bec23b8858a29dd5d5bca7d5785d1326b9ed","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.d0af8ba3.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodnbCRA9TVsSAnZWagAAIfgP/AmwVkZRCvbvF9uF1riA\nnMpcOTRnoN/kGx9aR/IFDJMyeObHNU0dmUgRrjtgENlcruCGBIWlkPUh0dT5\nHaKumRVP5yyTcQDZtNntj4jXvvZRJiz1wjPpadUd++mPe+wMe0D9JJj1pQLP\nIm6mlFFhnGwxQVULkbjte4FJkq3LH1aLMCJwZGLZ1e33IzQ/nzyWqOnpmFnq\n1ddq6Abo7JNaBMouVWzb9x3K+42fLhMchf8CY9JUG054FyrJH0fz+e/sISRj\nfzP5yXpXqZwMHgEuPWXwnGtXP7zmNli26DkuGbduIZETQ76WV4CrnVe8rh74\nMwFdkj8yIfgidy5lmnpEG9q8wLkVvIaG0NEW3ccrYHWc1hSfQNIzMWQ92D9S\nxXp7hxMWTYRCWP518wVU8G8MYiop/KElZB3Oxh/fV8M5mgZJIBRzntSPx0gc\nCsWj+mV40E+wuL4ZxZIdJrnY8uwL+9oM7BGfwu3sU+/pA9vAR6FkRAdK/5sq\nF3zqQuMBJz5lFb/QSX4FpJV8ArX14D9g/fAd7iqmV1H1YnY9CVfO8JBY1B6q\nrphJ9blzY97nT7qh6xNA69jlQ7vfV+wKoJBwZv9orTwbNuzOdkvx4jAHjYDv\n7HmB7Fhw2DN8GC/6KTKsJClUNBmv0zeKS6nVS/5VRgXPQuSlaAQjjeIZfJuy\nTTSn\r\n=+Gi0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE/9HwGeIFtVKiUS5GMown18J+s1UUK4E26ZYnohbVezAiBlAkijrBXDOgXZo0miY216M1VlFPtOy+HsRxRQmOjrIg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.d0af8ba3.0_1587665371015_0.9323706698516163"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8872b17b.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.8872b17b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.8872b17b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"d1f49732d08170a0330f9fb28f2b2ca978daf858","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.8872b17b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yBTCVphkqJCfYDdvbONNsISKJ8caTeqpIyIi7ix2a3gCCYq19qBgiCXC4T5pyLwzWb+wUzZgYRpSqHPlk3ZG7w==","shasum":"bbfd4c74c8b93d69a439b11697eff9c77cf7894e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.8872b17b.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeof1FCRA9TVsSAnZWagAAUPkP/jsDAsiSqSraygqJrtnO\nKayftT0aW+YTYOC4MbCC/mT3TqNj2v+ROTCNfISIpCLw1mzkYzgpDMiRB0cK\n49qRbQhxLXiucijAadL4NNjF8Fnuoox3eoPUSXVBYFu8rBvDWoijcIWBx57m\nHwDhVMHIhnyco6TMlQlf+PX+nsRQ6sSO4IUlDIeQS5XGcoiDpKawAxKdeRg/\nQwWLSUwjh8F23XD/qixwIt/aq6YTAer3V0B+Aq1rL7z7401jBpmyZwH1k3RC\nU7aWU+i1e1Z1o+fVjSaA/4odAxpwQoTCYCm/XHaFqGtZSAX1OvIy41Wnf4Xb\nnsCUfqApjiqw3ryn57OQl3abr9rNjPSQYI7gNXhVVqvi4i2TwvUmM1Rht4zA\nXRc2qy+H3V11zB5HTeyTaseRLW/qj+TinrqbPb53XdghV3AclytwbZLqom92\nBE1NjiOGGo1RMhoOGWxZnn073m4zNf9aNQRBBAraRPu0UBsnoWDK1n4e/z+S\neDq9pfu4SkfpdpM106CB27Z/OUA9+Rxir5VUhzoPssE2AwYWcNhRnhIPoPhP\nf4Qa/h0u3+oqrBDRm6umRwmE6/Mho8eYGc1m+AOmrbN2DsNBkKRASsGRMEDz\nOV3A+ZZoLIzOiN5bYHk3FVxRA/6w1GD4oMdWDgTccwV7LHN6YpXRTDtRQs6U\noN8l\r\n=OIzr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUGle7IOPOQeaHAtjdYwaL5JJdqwUfi5pEwFHfRAESjwIgXf6oX/8sQUZ6G7FVMpZre+yS6+RodFYsAmzdi19hQno="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.8872b17b.0_1587674437205_0.38358693076730477"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.eca1a610.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.eca1a610.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.eca1a610.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.eca1a610.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Yr4Zpf5R4AUPTpZDyFLo3BUqy/R3Uq0jgNk6X1XpSjfHz8ZmphhVFHIcvw6WpzaJLrrGjWeVzynJlVCG3vhuxQ==","shasum":"20d28fa73e42e0bf653d0a82cf82c320d3fa83a7","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.eca1a610.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogvMCRA9TVsSAnZWagAAmpwP/3J0VpnoEY4TGUeoAbM/\nrDgIHohLT2kxxGEGKEz2hO1ChRKLetG/3plQQ77eFGP2aguKyOGIgF9vYiZy\nNMgt3YyZ+9jazr90dEiKm4oLEPhwlykxGm1DQziucHBq3bpKP2q3zcdxWt03\nfmD83gOZeotoLC2yNcI4lsom6W2aaVgDXXnj9XKD7A+YEEKl4ycbcOdFfxFj\n6AMK2MK3O65QY0zPl6AZX21tVAxW/HHAQi754t5K4P0xXzwf+a/33xD7zk+j\nAmNU4pGlaBFAmyDzxhXkv4+AeoVKWEhnvFcYX3I4QMtIolsQZlC0ImxZoPYg\nRSrjTInuXrhWpwYXcH+lGPKDLu6KIbzI4vEGCdl5QQ9sX+HEQ/+Yb5UDA557\nrXgRkD/7ZkbzLwyh9Pyg+0WgWqm7lLEbngRSmVMR4vyv7W2bdQxd2OebGSBZ\nKGv3dERmNkIj1fDhIknsanhTmSbychg5VWCONuqqh2CA+DiDf2AsD13EHPik\ns1Gai55/k1gGt9y2apvNrxVeLVQH5LGEwAdz5xgrpUJRItov85sXmokda40q\nhH/8h8hrH480llmJ2eQlNHK+cCU+UV3WJ4+lN/NT2P6wxlw9GQX3RRcrUwds\nBCzVjaWB8NjOwBFqcHDcu5oM0CcrmItEewZbM+4QKx0INpxC54pzOxe982aH\nIqtD\r\n=xh1X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9Ch6Fj5v9rZ7cuOmHzdHBATgKitVyBMJM+3c5raPSpgIhAL7yXsFEVyRm+9dK6SyUhdz8IW3c8nH3l7ISgbxLM12/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.eca1a610.0_1587678156145_0.7548113185571206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.baaf529e.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.baaf529e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.baaf529e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.baaf529e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-IRmJBn1BtzPSBBTrpvvD97lvMdjxZheywFmOtdD3fls4XgcMSOWaxfcEuGvRC3g6kdc2vVK1K8gBm6K1xm0GFw==","shasum":"0fd2965aca5530238c5631cd5e00be31838784cf","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.baaf529e.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohokCRA9TVsSAnZWagAAnx0P/0JhhAoqESXTI52fSA37\npFz60ufUvlvLTMXhSmrNsUjv/hxcznieoDx5dGX9s4twBlQzu7RueqwEp+gj\nXRAp3FAK9W1I3h9oD6OMAhA7OHECSlC4OD+HDX0YVWAd326staW2lU4MZC3P\nK7zZaciVLo5ezx7WwQQzfg1jlJW4xx3nDgZ2BlyTtOuNWMgEpzS4VjYiLh3I\nfwRSNR+pnQavTRE0mos336gqkSC4TuOjP5YBK+w8V+lVl/+48Kpv1EbOUxZe\n6FbfRI9VvFiy6srPFlLSoYjoqL370BAV7U12QUI1Tu+0jQgCm+gtepRRTdrE\n7ixoza4QB2kyP2jmhNMusjx6NZOKHJ7/n4YGXc249Q4t9QZL4MWS2y2D4PMJ\nO9Xu7JX4YeFZwPXBheF6/xylkqJgcFnVdt0rAVXhA3iq6dUFj/N/og3qjzyu\nFVD8LpbL0hgcxzVoLK6t8nVzGRboZFV88V2SHsbSMm/HKicpDGJ0MBLJteAk\nVhLxP1+Fm7yiJSwE4LSJLT+U0ziA1FNRhs6LPw3Br3HvZZjfbQFT4o22WmO8\nz1bqNPMoZOXtwXki/5FKp6YeOLZqNqKbSRcnahpbFBTtgpxyFQ3f3wWx7gH4\nu7uAhzvNAksjgPjUVwNBdvgaCv5d4bX7RiNhMQe8gzK15xe31xeouGNwqcAq\nsP52\r\n=1a53\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiN7mWAqV4+Z/c60aY5j3p/XSPaFpfkTrtNr5HUdT7+gIhAILMp0lZ7tCiSR7MDJaSdmcANzgFO1H1G8gzg8DiG8l3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.baaf529e.0_1587681827662_0.9342858706357207"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.7a7992a8.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.7a7992a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.7a7992a8.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"b9b74b473b6026badaf980339f4451efd1a9e8b7","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.7a7992a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Te6btaqpX2xtaRHsyyFCCYWHMydC5XuHwXfEXXyE8toxftM7983N0vCGNi5jOP8Wf8nQsDpiwslzeGFGgTl7kw==","shasum":"416c1933c4053f4f5fa5c27e59a286b2b09c066e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.7a7992a8.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiEnCRA9TVsSAnZWagAA/HsP/j89uBJ1rVHPY1im97P/\nfzSjESQQs47gNwIQhdPFo920wdAyyqn85qcU9IlBX1pNYciZN0T9W0TXrv5F\nblwdj+wl2rDnnPaxM3o3Tj4d6ybiii3OjkX7Ow5gDIP80iXXpbXh1hkFSrJv\nq6RuSjiZwpGMoccXCMIPPjBFfTrO4BgQIxESFnwWfLQne/Ew1H9kqmQtu0Jr\nuA+WbVadbqVGAi84SR+CSd8S6yNzfvCorWNJl0VXTS2ssxf7Z4ketq2+GsS7\nquXYRAFswCN99UbWmkFFBHSIX4MtpS3k2og4OeYsksOwAPpaqhrLRMbftjyn\nEq4j1h1Tb/u/fKmZDJftnqv8enCkcoYXoe4BLf848EDw9ZqLc2iF72KkQ90X\n2cwFtXtLhO77/+7xzl5aHllPOnWFxTKtt23JlYgK6FA9DOIHOJpmAAD9turp\nCLoNkP38y8ebF0kvR/j0R6bygeXLARMcW6T992Dqc6Tlj/OhieSQKgQk+psj\nphGPQo7kzVC+QXLA7hrA47QYKXRcLAkSbB92wWHPowNjA3/FfNO3dn1Fo2+R\nlxzfv1CZTVK7ANm+b2/QWbrEgRYb0trt1dvGfNtSe2aEJMKbKMy2haKUDicG\n1SKwXl32pJax+mChJXLoFch52oNsXdtzZFWayXXWOiwwHub7UpfShqJK1sTc\n3gkz\r\n=Pi5Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHL9LXEtfgkkahS+88WE7SxwFy/bJNnJgliouGfhv94wIhANqPGfzU0irDyoo7AVQ617gLQFBt595I+vo3hixGbOeo"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.7a7992a8.0_1587683623276_0.14825051589143334"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1150d64d.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.1150d64d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1150d64d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"0b7cb5830938900ecd0b5201ad88746d308b91e8","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.1150d64d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Q5GNONeNN44cy60FlPqXLlQ1qA5p7mi3KCFa2nh+Ztuqwy04zEw3RY87TPiHcZPKSJ4JP/yraOJBeqXb81Zjlw==","shasum":"1ab915f88d4acc2259e0a3ab5ae2d7db726678d4","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.1150d64d.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojBJCRA9TVsSAnZWagAA1lcP/iBktjHOCjGGuHudJN5E\nlLARbOGIYkuxNoxVocKFp0Rh3WRfXi17muS3rD/QLfiqpGVUpLt/5GC++PiA\n9xspY4vGFYdGiMeq7z+G2QdDd/j18j5+sLVrFNEaUFmJ4XDzJmiNOvzbNPi6\n426twHH9RSo/d2IrT/VAIw91+75dY6bA3pkv0mhgxzNOeineS51F55Ta9sPp\n71tscJKAr9LH0SNyR2/Cooqf0gVg0ySkIjgdF/fCdJiWxL48uRzy6mo0fIak\nnI0gywhIUmTFXEcMSguc4BjbH01IivTr4saIDwbe64rbrghZiKpfQuksRtmt\nIEcVmpbFb/QvWzyOQDuJAMaVNvfsws2SuXQQQhdokYV1niXtiCQ5UbLJMc99\n9nr4gyiXa3fMkOHDsl2oYdMXxLETJfns7PciSMrxzJl3jtaT53QbbIeWOYNX\n21S8I4Fdfhgl/c/xeDJc2BILM+POF2BCp8K6W9sHjokmrEE2GZzqypc8hNn6\nxi9HmKYOTaPT3gTyKYsGv3Gs3tCxqKbFP0aRE1CgtDcXlk0b6G19WJ7sYNsz\nZ72PuvIGcR/YthVpqmgo39X08bWntat4EEpzdcp6xsEfgaSMB+LpGVbnswoG\nIInhL3UBaPyiaz3REfR+wthEL/aiVi/XpRKLXvkjUXalLhOvHau+9VXx8hf7\nu/B5\r\n=nxcW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICrHAcAb8t5a8TCMMl5gyHglyeWpmUJ3iKiA+KNb7r/MAiEA/jDV0Uajy53TOz9sZEBrrBbqAWrwJfyMpPZ03OqLBwg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.1150d64d.0_1587687497016_0.30458072841170836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dad3f828.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.dad3f828.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.dad3f828.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"ba9b04a7b15588d7423d100bbf29fa317a1947ff","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.dad3f828.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BGoKMcIZXvVajQznjbbXkxHqsCktHwTpqYGrnW/sTmtp3Cfx2YqtetlMOfoLoIVcEn//yTl/ddswXHHujbIGVA==","shasum":"3ea3410db43f3c7b38ca05b2049f783a993b100d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.dad3f828.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4dtCRA9TVsSAnZWagAAE4gP/AlwYwEh587VBo+yi6LR\ndgG4Seq/0BKuUTzBJx23BbYJ+QTS3tZcQc9Ny9K9fTyjysvUOPj7uC+B26Yh\nk+k3cVog1XYvlhcnfeWNVL/sggx6pQdMfzYoZ0c9gs/buFEFptGyftWDonzU\nCozzNEfi2M1XqPnRjDWC/7aa5IFQfKLArXZA+/l8n2qGcw42h3b4kQRLZoSV\nDUNVmPR/u86PgDNBOnRN5P0taqHy8mb7f/Pu/hhg0nN5rgM13WzaEekvsruB\nEYy97I29PHijbJ9YAUMKyyF8EpLCiDsodJbmgis4Scd2MU62iNiQIjInQrrF\nCOwOaiL+U9yoCh9yYCi8nOMnRDSXhsOM+VcPEjtTkCqsWyz4/uAkQ2hQ40pz\nCiem/2M0aglQbpGYLoQG3jaD55hU75ukcWTUdubc0AwH2dDVnHCrW10exH0y\ndKN92tk/ySkutQIdLYt1Feo+//J0eco0Dsky22SNdFeYtxd+7/Tm9UzuQBBS\nSlf2ZYnxME/zdCCkyA8txYSJG5oRd+KtQFuKsk2rqJ5VzqdB3JA0OGRUB7YI\n8EELeSG/+JVQuk6VmRe5dYkmEFzQ2FZL1rvsdPgh65b7n4erGgNjLeMasxWW\neDzCTscXyHahQHSsHWngBfR1zuH1MxHMFQZscnZNM1v2uxy4PVOiOiC7MmAo\nNNPX\r\n=8oRM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnUU8vgqTf9RxsjlimNKue33s/X/YY2UDEZqmJf3d1WgIhAI0UCLN92TQqYdKLOOLgT4sJ4YX+xW3q1OBbr5SbKnbw"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.dad3f828.0_1587775341195_0.4240429458501378"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1bcdb47e.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.1bcdb47e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1bcdb47e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"ed51e46ae11b69727c91d55f440b68af397ac10a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.1bcdb47e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-gzeErkxtrT/XR7suxjs/joclDkNSnkIHIG9hDNvZ2AkYj3xgcYkNhknyKNxuYF+DtXYE5yy5uXmZgPOeosSVBA==","shasum":"60b96c83c32b7ff1de7c7f599d42aa58c4088b4e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.1bcdb47e.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep4L1CRA9TVsSAnZWagAALDMP/jjCU+AwqkCYAZu6O2cH\njOuaa+saqXRLQ0jEplcU3ahKVCi1QrfjY7S1CPhVjK/1v/n12s5Tnj/or3Qx\n5Uhaqn9b3+V0Q1IqFaiJ5g4L4Ft53sbfK3zMs1JSl/p2KV0W5zMWekGVc2OD\ndk1dc+hDlYNK9BmFt0QVY7MoZ12GFaCEH6QPRXsBC5omVxxc6icpIoRQLZQu\nxUoTbKj92vCE3aF5Q4waL7kX4ErimH3KI4bZt2qgAtDTd+u/OIact1D+P4IT\ncUWaTGRbpkHrH/PUbkBtddBdR2Yxlz8kzF/60oYvoDAadcqBoj5YC9boF6KQ\nEi/3OuatxZvWEuSpClVbWaBvwKsLsNCE1wrCphH5rgfs7NNmLVD7bfmdgNSf\n7YaoEHYe4/KUoMfos51nxD32wdHHglSHE+FXZRfAIJGsKM0/zFZpDGaLt+VI\n7wcz6bWBlPyD4Rf7VUF03UuW4JUiKyIQDU8un5NHiBdmHhUyPH97NiipAjuJ\n89aGXAgxIzhADBWGz8r32Gh7NuUiqmuYRFjDxSMyGTMQoKfKrtzwvqOo2nxC\n/U8aAO4D0CZ00Dtq9KKkD3+3tQiS4sp3gCG1JP7LD0xDpZ+5eV+yT5VQH3ed\nv+tMeU6f0xDmpmuIIi4gJ+LOqjOoXs1sqh4i5K8K1STSazGVTyA52hs2QNvc\n5OLT\r\n=B5hK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYbVwn1rah7uQwBhs6v9P1UlySySkyYlFKSKL32+uOtwIgVmgMwOi3ocJdLUOgjgEcfA17guk4d6uN0kgW2rOrCoo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.1bcdb47e.0_1588036341536_0.584646225648755"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.86ff1b9f.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.86ff1b9f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.86ff1b9f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"61a98a59545d9e0b0fd96c928737677f2b981fb8","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.86ff1b9f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-GNfGZns7CkxMVHySLIKhAJvv5gpQooO5qZg8x/PRSvK5yB9+b71YhvAdbspPjhU+WZDzlb09xeZAefxj0ymqgg==","shasum":"f9135a6522e22ccbe17bdd10b6e3518a21a13d79","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.86ff1b9f.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep5sWCRA9TVsSAnZWagAAIXYQAKOE8Ednhd2SIlp95HFO\ntbTd6Ywd/bTgclI2LMnrOycFAO0oPwBPD+/AlH+gE3L9cWz31VZWJEvnyFPq\nCpOxpGigsLDfZWOm1Nj0BsIEDJdwflxsBiI8zaTEcrA5h/x/w8opZ4tTWeKn\nY5+EEd3buCSosiim3c8w8HPkvW1Jg57OkW1G+/BoPMRwXEbtg4DpaoXa3xLB\nivg31wjPuyHeUU3cUsaBncY/tmO2uswZ13DFoRNR4IcD4l96YYOPDkHiBHoa\n7Y0uAXyXIsxpt5RmTuh3utX/u3rWj0p8uGRCIuRbqdI/+t3xBuMASsYRdhB4\nT/WRnb7rlehdKW5aY92aRGrE3g9SIZ0pJHh+1tRQHr1ORhH+kWkFcf/KbXyf\nhSVUgTYhBqtsSpHYh+X9atkVtWKeA2PfK1n6uAeXsOWsyTctiPgTFUW0yavU\nB5Fvj9dPcQglt3pSc4E13fd0PIsj4cbDBLErEC7YA314YA3IosECPSsTB9Iu\nmSCil1+bQp6qkRtHmOO/ls5nMHR2/iHg9iw1dKwdUOWGOEgsDvHdgrxCrqrt\nN8dYGl6+CbwkE2uNSMc3LqUjZHXHt4PNASf5eptt1N31rNbvpPRGeUTpSFzf\nZRDgNmVvSzsED52NL0hU3tHffT5SHVnnPABKocGAlthBCEcxjm9G841OzdBh\n/Jrr\r\n=Jvf3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQCST+XwYRgXvvSvMPEMGHykWJ7wxy9vWBCamt7DwaGAIgOQX26t4tu86bOppg+QArlUyUE2hRsXVFX7d3ii83rEc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.86ff1b9f.0_1588042518193_0.6482201491245023"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.54a86b20.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.54a86b20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.54a86b20.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"8cfd732e72200c6982fa6d6fbdd6cb5496660a6d","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.54a86b20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-84HyGUkb20g6N2Ofv7Ii5mdwbhSSB2+7gOp/wk1KscyovzcEmJx1Y7OEzH+LrwU9szJ1yVWrVqrBn7SNKv4a2A==","shasum":"e48662e964b534f9e3741e31aed005d08c16bcf6","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.54a86b20.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6BQCRA9TVsSAnZWagAAQcwP/idZTB1sjwRaV+r6z0d8\nwu8XktsLypS8s9w5XZwLcB34G+Gp9msbfBCuAEF/0BmcNAdXDtEIzIT/bIgo\n3NdEp8t+D18oHoTTt/tlrWPCTM0pY7rvXpyn8BWX9N//gErLFqHYl5dwkr+A\nsrCXkwkkOBReyeNRTnPeKBzwpRe0g6mOePPtPb2FPPDkNq87YG1qno9rNw47\nBPPDlw+HRSZd92SpXunwc3AB+AV2LwQrcKDn3yvpJ4ripuaY3bHpWb6TSujK\nIHugOSPkpAqDDQpMUi2Bye6i28zeD3bsh8KFQHFNkjCanP9TcwdHS6Vu0H+I\nv33Q+7OocDr5yXTJw1fWVUVNut9euCgR/cLHMWMrX/AmIwmWMPfVqBZgGT2Z\nugvXEZSwTuxxQeEKYvwOfR32j1tDIAPTWTdwH8PG2UdpvuC8llMsi4QsoG8r\ndK40+zUI7rvx3t5VvCEMyQu4fwpuTo32rH4DP8WXjjbP64s52iM1ovyCfy6c\njaOxny7eWYQg9WJvVSUtVcpP8i/9Coa0BRxJuF0yj82r76SMvMeIiZRp5LKL\ndGmFqmBtn1f1mTkruLPAf/gNtEajEcsF6gcMyXkjZ3W4EHaPegq1x3m9Fs1a\nL2z6utAglpK0j38zzzg7my770fZZFCu31KFTCE16jd4FKf9GIRH4aLnL+Kdq\ndlZv\r\n=W0u/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAxZy99qdetY7k/XyGWk57il8en1lcnVrR5Gjk5XCoz6AiAf50JypE08Vp2A0/F/48dV+0jXpzKJvRpXHz0s53Gq5A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.54a86b20.0_1588043855927_0.040054213805412964"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.938fd24b.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.938fd24b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.938fd24b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.938fd24b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-LaShgLTAU0JI6YElMq7h2cOztAZ+VI2d7FbO+i4yxm9Gr3yvYYAla/zp7UITIDQvHIPwzpDhctqo4XhcEnfM/g==","shasum":"c70c663f946ab60af6a1ae1ac0841d2fc30222b9","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.938fd24b.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqilaCRA9TVsSAnZWagAAXIoQAJUCdfwGezLXsh4lQ2yd\npRGmzrcAiWLNgIoPq5u/w6+xN8r4SLB1O11qL44QtYBKzDiquAQyAl3ztvKs\nkTvZhxHy15nKU1vus9QVTuo2OcPloiMxFL08Zq6pU/JJQJvYtd46i2obnvNc\nshQdOeJcDW8MflXTIGr/S6NziA8zJNbZHOrGYxNpVHUn5/IXqTec/eknFoNe\nmQFfuCwLZNfZ3vPFuSwRZN4OJx18TfXZOuB72DFYzdFKKg3IbwjM6crNbLjL\nYttn5AUZVtnvy0ljyp7hE8Xv3MAjgs7T/zZC9Kj8Km/txVrGIhwBl3dg8Xzv\nW4NWwjQrX59yQVgsCe/+DqzX68yDoqorLpr8UgLOfmEDqQgDGTixhawrGsAU\njuXuS9+a7FvZFpvSv14ElnPbdwq+zDUDfvD+Z9r61B4hCJJGUCxe8OY49N+9\nYUX3yq6bQXeMrplcrsAr0IOo1kYbcTU1eUF4k62vtD+pTpoj3wlKItByYO/B\nY/zWjHBC4wy+Z8AyIwET+p+ucbWJ3Jg+KbGGYp/3iB9B6RcMqaNJ92PAabBQ\ni4kPnLIOg9YOJxNZ8SJkHJQE/aX9bBmZyzb+a2VesVk/aGvN8o/zvtL2dy5i\nblmf+i8qfib63XOLFnf4KSXFxVxF09mjMHQZFOAorq5993YeUnQR55w3U8+m\nQj61\r\n=CXQ+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGZsTyZReiCYRDHTQDXX7M37WhMoIopPt7qT15WNMnc4AiEAqFaqAih3/O0J1+m2N4hykrKZSxoNQdev2eaww0yuz7Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.938fd24b.0_1588210010118_0.0013697019506808683"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.39e9a008.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.39e9a008.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.39e9a008.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"2777862aa4cbec00918605f0726651658a2c66a8","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.39e9a008.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-7OjrVB1UZV3Zm0Wq4mYiVVtZ5PyPBVYiP1rk65JYKgNq2Mqws0LGBwJ3+PHQGBAQLw+Poa17BCOlHTVHVj6uKQ==","shasum":"ae16f3de1254f2b4ca0b617e44647b7eedbdf6a6","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.39e9a008.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqjQtCRA9TVsSAnZWagAApywP/iqCIP8sUnjYa00kVhch\nQTSWOnB94Lz942CMd629ag2B+2DX6VIGWjAKtFdZCU4md8UlyG/0jAqhdoZ0\n35FPc+k7RzfTo8LWOEvvUzN3WpKh6ZCSFVKnioH2oWKrQbJg4V6bNfgsdrfz\ncwnFCWxrFYOjhf2QKPIdvYD6rKeNaiNWdevATPGpg1uHTtQN/3/Hztazesi4\n14ne9fYX870Aj+w5WlmLSP+Oj/U0pfxjbZfpHF/CYXquT1C1B00l0Yo3OFHN\niS16CAwjMfnmUdxmHeeHso1C+uopjpC6lxUzMdavPtiTOMgE7bn3sZDu2sux\nH29VsE6dtaPML8eElJdcz7VepOWqzfSHjVeZRsdkoAo62I+6W7TnTX6EySLF\n3yOI+DVmSyeEote0Pu4pw6NuWsMuvprm/YStMJxcJpMmZxy3op738bh2kTFI\nyFWra+b2lymkqQn48L67dkG+uXVhm+2VPWj17Lv7HrFzrcc90d/7zoeQIN8+\nfWR8f19R8SvXEd2cSMCFVxIWIlPsmnlhhEbxj5+iZpISysJW4CA9NUUpB0Xk\nS2bciQupZzB+ijEKBDSF5l5v68hmcKEp/6V1T4jEh5h7tUBFCvsU8Yd9SVN4\nQotRmQHPGF8XSftIi5EX2FrJ18OhWQHY0f8tPM2/xLjO/u20dmeCLjdtrud4\nLrVi\r\n=wqwh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6QQ0ktninEZegOCvUN8eV/BiAZGf9oQUyL7tSGkyw8gIgdBq2cbD0msc53sCl40Jur6twDX2gTWIoKJ58ckLB65s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.39e9a008.0_1588212780909_0.6607485766168606"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.f3b365de.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.f3b365de.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.f3b365de.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"b6d6f6d4a289f46197727279f5e776b79264ae07","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.f3b365de.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-VEXpkLpbwyDKnlqe10tpM/3Da7WTg1tW+vbPMS6bTPoRu/4hiytsdgW7DvEUKX3jtTwLEMa8fwY3s05xtGYQYg==","shasum":"1dbb86481329980c8becf0813f054646e74f8335","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.f3b365de.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqovGCRA9TVsSAnZWagAAE+EP/A5xYTy34VXXWB1jx9jl\nyesPeNdQiYhqx9bE4Y0j2CPsdzgxxHaqnrdvVU+Vi0pAKSBWt88aTg8rpWs8\nQvTX6b7fXMl7Bq850FNNjtUMx2s1eK3XspHvqFJOTiH6qS0czzftF7XDX7vH\nTM/DlnOXJ2cteNeciOGVaUTSSxBJuIWRvYCjKV+CbHkB2mJpsUNTt/FHrw0g\nzs9xlumZw1mkXgARiHjrSMcVRxjs8mhBHH69s4W5l1jSiraZ7orFGVpAe+Na\nCoHZm4spdEoy9W1sYW26RysoWuG5wHvC5kv8iLxq7+bxqHAimKuBzLPbdXsa\n4l9kEQEbTHdi5sQp5DolFjEI0VAEw21puCbkxCssnXqq7pFd86cj+/pzBp54\n1sqdfrsN5unsphdeRJH+mYw5igVRCAWWxfr1w9xahs5t+5vtcnvInBcKKRim\n/7ZE5P52EZPiLTfUspouQP9pm0ZB+aevcilVY4v5PoWJrA48E5z8kbohxvh6\nSgLUGwqqPrZVQx7FAwzQjHcrAurNyAxeyJH7QtjgnA60ltTZUSk4/p9a9rtY\nvXjMwQKAEv92K2CBx2mrFy3SuobpGHxGwjXUk6Mai51BTjK+iU0ZiFFuEd1m\n2gqdPlT+Q/qYxsHA931ZARrL8LBUftRHJ7zvXxyBmOsmN3RtWAqxJrbGJac/\nNy40\r\n=1RsU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDL5Ig2yutrETjJCc/RC5q115Ld2nLhGXsnVtmGDCutfgIhAJJd5rLq6Kp7sRcFZdUAQwxMeqyoELrsTEXLMgI4AczR"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.f3b365de.0_1588235206098_0.7695196653878225"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.cdbdf807.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.cdbdf807.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.b0f83d2fd.0","@material/mwc-base":"0.15.0-canary.cdbdf807.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"c46702178e5c5a1096937d4bd70ad6f4ac4d1dab","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.cdbdf807.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-QxnF9Dc9qlt8nP68g7CkdlKsmJK9UlGKpXkSTIct1BMdKHh2L2V6HpkuMRFsGHIQYeRsLzn8yUC1Gf/1l2uaZQ==","shasum":"2a295c7818b7458165f4f7574316c6c145118d0a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.cdbdf807.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq2ncCRA9TVsSAnZWagAAbVwP/R7aISWGXTlIi4us5iF6\nRUWsRMBtYk+Cw5oAfmR2Oau6pmZqOZliLbPOvushOVdfP1BRikH0uaiT3G4e\np7yosFmlGJVyM11PFKYJFh7tBDb6i/V0zJ7vuZRClRxW/pMR09f6kDsDQF/r\nftDxC0rg2p1Bo807wdTgQrKBHsj5Y6tyWQlp+/rogk0orrwgjIVRPf0194tL\nc/x4eoRfbGNwJv6iiHlgy9566x95kA2h05n/sBnpNw0DbyZjpwWlJ0XSYv6F\nZsvRH2P4PI7I0AsSTlVe+Ac7RIk9ehdrR4FD6sFxWuvA+10UmUzdmPX5geOS\nUxlGfoFE8V6lK8kdVqi7zf2Lk3l+2P40Udi/0IrvEpUWRSf+FZlr+g36yW8r\nWf12YyZvkGkB/+PlF9BIgrqWiTtQSSrZ5P8H2zujraJBoU54NXP70zhHJ+0+\nJBA4gFSkiejnkeTUHd0UjkQyhpBoWkMKVOR0NCQjf10BhExePKbnDdZMyMLm\nhcD0A/7NMWH15CRlGH8cVyBYow+ypJW/bVZNn5vSe1/Buzbd3OtV6tNaZW/n\ndCKhuaF+EktK6/vZKKnCVFZ3ucLgOt6ifpJstO0ofcgZQNlDA6k88juTSZkj\nWSljkdmpjKETJJYEJzVpDDS8SAPxYkJtOCVQ0cf6o54pspoySzdjXHHwD6p3\nGSyl\r\n=ETQ8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzJx3qgtvZBt6qL+nyAXu84qDG6S1U8H1RNYjJpGslXQIhAI+0N9PJdlvunmluDLmcTa+w7kwjrPMUZrKd/S9qF6zK"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.cdbdf807.0_1588292060025_0.9090378460365949"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9995ae17.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.9995ae17.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.e59906a57.0","@material/mwc-base":"0.15.0-canary.9995ae17.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"4d5bd8b757cc94e00dda1cdb19761b283a15eeea","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.9995ae17.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BzFkIcwnmU2OUVJabL4icxREyS9cW7V8oGJDG7erKNYJ4ye3eHcw4UO6u5v9QQbodD8CxIhLUIBZHWEQeNpz6w==","shasum":"5fd8fa66d729d73e43ed55bcdec37c40be914dea","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.9995ae17.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerG4VCRA9TVsSAnZWagAA1HcQAIpoRWHTf/AR9/vdEUqv\nou76hIQ+9cXmMZ0jtBduw3IbCJuM44q/GxbtcewSIN0n6j9lXG0ui8AYPj2g\nwEaPq/4dw3JXeqpPKtwWDVdZCNHb50nPtCCayOL+zTmdVxXUUxaWapkyghWq\nfo0gCEvcje5kN6f+N8sIqQR6FWzkaLCgrK9QKLafIuzaGva0jyyL/a8LurDk\nsQwm9/WCKjCK7lbX1ptbpcACxikAakgF7vkd+X00FElfU5XAzBoDXPmzS1yJ\n8JkLzni7yXPg3q3DhWCwHmiQOrFNQPbQJCSVbYntFczP1dgJ93GUJ8kQukY1\nTvpCWMaQJFY3B3xu1QrsUyfZCAEB2FRLf2RV/JGfUo673PFlE3m+sVnicI66\nqaBzFskGk7BUvB9qUgcb9nMTRVGcfnH5VNvJaNVzCuQ5dbp9aiUrX0fNzskr\ny7PH3EEQ2523p859cMv9hn89wBTViG1rs7npZLWkbkYNFw6jQbrKkSl16NlR\nAV5Q5sckcSTblFPIsWw8aIoqDt/KPZVGzIQodOJeWBmOBgU/bdx+U+YlzeZI\nzLvQGHFu/7i8dM+Ad84edbttlYQUGFd4+WgC21j3tKYif9PpWh9OuJG7Uw6b\n3aY9NcsDV4ykQBCuISD2Kg+kQK4wtWSpDuKlEyKSAJsKh5w/nFqLnCid//sV\nfLuY\r\n=nosu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYVpua0let9UpNe73s1PQjsw2dNRyBwNdGD+1JMrafEgIgZxLhPCc9f/BJSAQlNo/WWwv8u4cl+vNvrE+YOtXhvKA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.9995ae17.0_1588358677600_0.8441223999886254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.457bf035.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.457bf035.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.457bf035.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"4174fcf7d0ec013419d2f97c6a615216cacd4687","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.457bf035.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-JVcW+gTN4BsU3pcXLni0BYirFlipMJBT8KtrSnaMNemyO+Obx/jrcVE8WLhfzTwNS4fC2frMpXQRPhM+fxEcOw==","shasum":"bf05f1ebca03c43733f2b8bbc4ef933fe9d66993","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.457bf035.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIuSCRA9TVsSAnZWagAAAMAP/i5BrDehbuol3Gyd73h1\ninQ5lB1iAO9zgCCABmz6o2TtGZUgN0SKDHt0ktkN2oz+duDXmo1WIYJQ9fDg\nBaFKPfBWa2+G6IoTS9WlL7ySTIbHU7B1HQkm1X1x1nnbxFFnWVqfMVF+IwNH\n2nre9+EwUv3JZNTz3qP95+PgytnDK1oBAzBCo1j6LhujRuJiqBJwYBePnhk+\nflisQjcBCGp2M1mC6yzNtP0YNNrOqupE/T7/PCyxOkHPs6S9Sik7ZTSsxZeB\n3tGUg7H33K8ILil0DCF74rs0dqg3uhxt0rmWtaSTLo8BUU2Z+dJImKf32AMe\noEJDZXWPSmmB0FPwWGrwhI7P40Eu4wAPHShGplwLN6M6D+YXrQziLLHHPCiM\ncWHo7tTPK1LctzhqmW1it2zvfrorhHxfM8vXJUOsn71Q2Dp978Ghcd+/8iUI\n3tnFcVqdkbjJLDydErCRTKaFXpdv9OfDN5Ip3r1PFuJW+INz2I8mMDGRVY7w\nH6R+wwxHkaXXhE1lbHAjX4bWnk77CaA590xKzm9cho+B0vaMmEW9Q4yAJ0O6\nWNmiJGww4vWo6wXZFbTrmd5iUAExaGZvg7i98QdxIQCG4o6pVwCFkq210Wwm\nrkKRxa2tHCic40nPQNHEmLUp45kbxlsHbOhaakyzSqQwsggBgJNDVf7J/F3L\nJyqS\r\n=RB75\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBubLYXnCtGIPxR7mrTtmkGxoQA9NgUET/2kNO8xLgEcAiEA9kJCM+aql0CxmGaUSDSFoEDGoiTmqVNx+TOLKeUKM5Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.457bf035.0_1588366226064_0.6412408664399625"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2381fd02.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.2381fd02.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.2381fd02.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"4e8207837776c4f108fb86133541c49689664446","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.2381fd02.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-oo7F5cTtXW7HsA0LP+BqsyJfsM3PwGnhSjp6rvzIx28AJQDAp1KawB1cFpEW/p37pH/ctIQC+JyU72e2UH81dQ==","shasum":"13b8ba31c50f408b565d7ced23d36647db40db03","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.2381fd02.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJOuCRA9TVsSAnZWagAAJLoP/3OZ44hRAUKUmDwFfE2A\ngAF9Qx2x5cWlfU/QqdXc4i+vMQWErw3rZrWkhuQsPWSGNEFO6EGUNaMmdrrf\nt48X0qQTkjmKgpCPPhQXcpscUpvwtHymj81metUUgrdc8nS9WkQmPQSTXtn+\nGmDRzLeMwtvonunOZ05tcMxugoY7MPZcjVONSqcWWEoFvoAOuqz89dbBfNgk\nR2ZL+2zHAVXicRfWTaExQM3PSt2tgH/JUT649REMcwBRAVr1C+7FB609/3yD\nLDsejo/j45VB3k5Zo/x51s9RFymlOLdYL1r/PZ98rPFVCKhHUHagnEBcWRA8\nWMrOOvKBY9htyzLuWf5tHQbPdFz/ycy4frpi1da0GCwyhzRAiu7gPlqVLkEa\nShU27EYbsYmKsJJ6Ebfw6Ix2P/bw7dButSAXUmUQvA0Y8jujkS6mcSd+OyMN\na39BGLvgyXkSwSFR4YqQ3gaIaUMGgifRfGvtXsvJ8e9mry0Z9c8iG/qurz21\ncihEDEiJLkNJNhFQx8c26NQ3N1dVdGO8UbUYIV98BwD20T75HtIkWG5kISZj\nVMowGUuIWxtfg+YNZObjMQ2U7ZUWUvcevTPIkMzI3y2ceXcOoY2Lvm0j+oQ5\ngQcfdcgiNFH1E5vbwLz7VXAsTE1phIXwQDfys9Tyzr++3BbkPhN1PGyJ0yWX\n3Wq5\r\n=gSUl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQw/2PvJZ70wy5HV2kRF7RIj+qJjHzqGPryIuV76CqOgIgGeusP4DXpYm4xNT7MBlOCnWVrRFGm67W/6WlcnzFA/Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.2381fd02.0_1588368302161_0.9100785933579782"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2ca9b57.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.b2ca9b57.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2ca9b57.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"98f8c3a13f6577a5e1ccca480ffe483c91183a7c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.b2ca9b57.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yIMWGkM9YHAD5SSQv4G1HVVUde0sU2g10755GtedJdyjexmDzqwpw6q/adUeKT2AAmNlP4qOih8rPZ6EOidFrw==","shasum":"59756a93b77552312c0cea8832d1cd72fe725221","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.b2ca9b57.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJYkCRA9TVsSAnZWagAARO4P/A+uVsir6q9USp0VOJSP\nIDgexPgKxZb14Y1EvqKf4xHnX1PR5pjTs+im5w2ZKi6ASU15b8uB7pe9S6Aa\ni9d6C+WFyxOeUHmRLG0cv9UB2oatTQ8mVrYqQRS/ffJ3+DonukK0G/uTLKsR\nAbMK36fL9md+pxt2Kw4EXIv9flTRY7Whs2CtZvNetxZgkqX8kvD9uZiJP8ob\nFOKZhrxoUxE22hGaG/gQhl3dHQCsN6lxVU6fDb8M0QHHi2N3wEugAmuV7IOm\ndNs76o5erRvaDysMZlU19ITDHGi+CwHECipyFC942ARqmfqY8IGcP6gqvx5R\nHevpORpNlQ0ofLXhY1mACOVKfHAfIvJ2ai/oYdAXhNFZu0KFD76ICPOOv6SZ\n1M9q3U0Kn7qKDcKAOivNf3xg/gSwZnW3qEM1nEJ4KUDrIREdvvAK+X3GH8yI\n88dPIZH3K2MTvvbzopiszw6bg85TtKo5oa+FBjFMpkKKJDvWWZdsY14Uesq/\nh7RM7dbKEvPGqJXajUTLvrIRy/Vyd0zkMa1HJd0FJ3vTz9cRn+0QR8JgEQaG\nHGjUZP35V4HDxwlEVm6Jyns8tio/9TEdsNndz55bvSYgSJigda87lSWx5wB0\n39Zm+CiFjBMmbxbN5AH+hWvoCwcQDwLP9iIid1oqfGQ6eK/sN17x+rzDFZxk\nmUZ+\r\n=gpEq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDk3DzkgWCKNn86b5Se3i8i8iiKeeGg8GSIKLBMiNmkHgIgQ3ahaj5pU7qZzNpFurslRo1PG/knGQ9xAYAqwZtK8TQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.b2ca9b57.0_1588368931396_0.06969918915783824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2b088e7.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.b2b088e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2b088e7.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"c524f04088895074106127ef3584a2aeac09b189","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.b2b088e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-7U7j0hrHdLebepap8mkOmLvo6xpaeFI+1lHbGDvd8URLcxVRo78hg/qtYRB1xP5LwVBpyFZROkpJl0PGpgDCug==","shasum":"a3c3be865b3b7a8f100839b4b00b3bf70db5e2c0","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.b2b088e7.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKOmCRA9TVsSAnZWagAAtbIP/AhQGSGBlESybE/xhzgl\nUGDam1rnZhQjk7x/Q2lMHZnQaajopsoOMaPHwmgPVCBnoUTY8TqIT6co8E7r\ntiemsqRIdr4ydHp5q7hLVm0N9d5H4qSMXRhWIQ+9866213nE8gSpNMj7vSbr\nkck79QinVDHm8Wspc1EYBLMn2wG4XR/cJ7oiRdNd52/g1AS61Z7roKRExECe\nKPARHer1I8g99l4r3+wWfbv1gHlTUl0zkKyOHshDEImcy31bK4ZXWaw9l78u\nJi1DV64XoBUXwM2MkgVvL7wdMc98PTySYEW22lAkJcp/w62RnmJWoBs8tL+e\nEptyHZ4p9lRR/thPvGoNIUep7t9NRH631N+RPBs0Q1MG4KHhJuBnGDvxG/uo\nnP60/+jf5vBEhQxec6/s8rO0LWOxkbXt/a0hw1ZR9nv8LWKRc0T3AHxa5B4R\nZ6in/HPcdbvGaz3mT9EB+RtrVpDK0zjzx8uvC5s1gJeO7bDWTHEiugIRwHmC\nWPP9YARKBidFXpjYsNJ+pQYs7EfJ9lFN+cTRpqIYm3K0ajJejzHdUSYl+kzJ\nca4kSmxhZb8hMc1SMxDEFEOiEFK1Of1FwC4fSec7V08TvRVewy8yy96xZCpF\n+jKsnHjVitM2PRKrLO8qF7xjBL922ihTZwe9jiijEn4xBsEyVMxMJrn6Fm8e\n4wD9\r\n=/aAq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHBKrEm+4IqcdDs5C71WznQ9hUwUUu4QNMPAbmSV9zTfAiANKTMQgghzk/PxNDxtBnsT4KF8n83HQsLN02Yjxu8l1g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.b2b088e7.0_1588372389928_0.9441963358815608"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fdd8f69e.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.fdd8f69e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.fdd8f69e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"3888dcd836699affb59b98e4306c2ac03971ac4c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.fdd8f69e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-pdu9bjAtfmdlcwc8gL4Ovk7UsQVYJxmr8eYlI3Nh5C5Kwd5VAWb6F5tJ9mQoyfB4kKGwOanekt+IlG6TQEi+bQ==","shasum":"1179c1d44499a35834afef42c80adc4107f9e30d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.fdd8f69e.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerLvHCRA9TVsSAnZWagAAuJwP/3G7taJKazlwD28lnEis\nbU/MMEOD8RS+lAcPXmmna86Zu29Oq1kvjsCE5bnIRmf9vU4RgxD7sbqsVygQ\ndf/fls0TCwbeCCrbGwNv9V1vAUQ/npI4JI5tp7PQLl3OEYqNRYW64EyM2Ra0\n6BhnuXcFbwVMMEvLzB9FDy2tpPYBk9sE+VfNM0wgBenuQx2RFpm7KdtsTWOL\nJdF9Srjk71+hyVH5o9TEkmltQXTeJmfsQyspbmMldgSphda2QI18QDZjmhnP\nIaoB9JctjUsfUnkcCrMHJ0FFsFACCCy6VL1NS+jyoVChMgCw8yXZ+CIx9jLP\nQPvWwZAdj6y5+DMJecWOJry46iHzP3CZKFexeCGr87P6s7UzjRP1roZ4KCyL\nR2iVIK2iw1lYPuUA8crJSUmoKdDmB0Q7OfArffwu0JL92tudtd4RxVD3YKxR\nce/KsB6TdHY+r9A0k3B28iEvxGKH0/gpy1dEaYFRoRimNdjP1bP2+p/wHAwq\nPFJ0Gc4lquJAt+9Sy9jXaxZ5wMrlHv+88btvANKWOdYSzghh4D7MQmW+YFE3\nkz95BKrvYp73gC8KW6UuU0lmwJg7HuQ4C4cx9Zo0Y0urLkT1QhaJYdRsF7Mu\nRI44m0N/SynyJKDQ+BMki4pg5p3j+xC6V2ICTmdhenP0BvDaLxh9XRvY4kvX\nRKJ1\r\n=Xcbp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCs5PvLdDHGcCyAybpJGi0aYqDWZBQwnwxe2HeRg80I7wIgPeoqVCuAgVzYm4fpJzw3UWamOqgDDm0WcOcT8S2A5IM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.fdd8f69e.0_1588378567164_0.49924365953854855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.730f45a8.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.730f45a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.730f45a8.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"e4604a16ebeca9fd76a4f742d3f936e83aaad680","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.730f45a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-i2iJ+g+XuGWy4uzhItt5SeXFGhxXcBiyzKFx/klvCObxskHj6eRLypW7rgsSKAdR9FjKAUw4eMH/UCgOB5gFHw==","shasum":"5231879e9f4115c4add24704b56ef56233895b5a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.730f45a8.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery0uCRA9TVsSAnZWagAAReQP+gPDzztNfw0Xol/HmIV8\nWc/thcV+JGYMSbxutfAD9AL7HzMAXmnO6y/4z3RnqMaGNhfTc80835rwLovk\nlTfn8HjWpqg567+EflWm0+et7xP2C4BN6mdzznd9uqv1rsrUYFJ+S3GDGpac\nJcqT/PFqMXKD7/uW0S+F4a2REGb6mSe23M5j5mBka82AplEa65SnawbrscM8\ndgE61b+WzkwlKpHooMCOFNfd5niWpF5zq1NhvRH5Llis7/3ikNr2bm67yvlk\ncCQY8zHxbFIRcl+s9EIOlydw9l607Y6wl3HDsxjpb5DWpv6rGTakPPN6I0Kn\nufFEjBiVEUHf6ADKPG4xJEjXTcdVRD/xoI58LBX3jy46VgWBuydfKRV+kau7\nFLcVfEaRbJ49M/AdvjnEuTu/9Bce2BF6Pbeskdilj1XOIpZrPxAkyTYz7sJU\nCM/2Angz6dmVl0zp/+57GssVz7/Ci1LcKTye6M0SUVEy1GHAtbsi440gpCdl\neqVPLurKfJ77H4TQ3aac9la6xkihBIqP34jq06skzK3Vwa+LygQRmYH8zcKK\nWGGL36vHx33f3Y/Zv94qKzrHbizTt9R7lLYYFAV+6jbg4VgYydNEZatjxH5w\n6UVNovWZuPHlli1IkVHIyFKRC74GU6vje8p8AHdZoL/GiVJXEj2JiUhvECZN\nkix+\r\n=FB8j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxahqYVcYnU1qmg1hKUmuhoTzzfCu+Xx9rGnIpAwmwuQIgCAkiImS6Rgd6I+l8oLrGkHW8Wm3Jz6GJcaYbVpzUqPY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.730f45a8.0_1588538670404_0.8035727592322472"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4219bd20.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.4219bd20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.4219bd20.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.4219bd20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rtkRwGcpXO+t+RGfLMdx26mQQh5sbQR9CWFa1Qed2clxMQXQdukywYWMOha3ur1L9AOtHeMEAQu6IHas26pVEg==","shasum":"ea25273a87a1cf409d8c1da5f7c888d92f520c7f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.4219bd20.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKXTCRA9TVsSAnZWagAArEkP/05aK5XV2mxBSZqsalsa\nmDapc0z8AQhdLesQxgU4Fjq7ALrQ7Wsua8aq8KS3kzrey7V3wY+pvvPMYEUI\nuv163eqaKrO11POCIOd8Ez1DV8BkpRrrgnF9sjf1ew7gmfd8rO0KuyyGO2Lg\nBeBYkGAJ6/aV/rX8VaZC9RtN+qwT8SWB+51n7EblJ526m+zWBuM65+GKpID7\nk7FIOSRHtKGI33ctyMTAuW0czXVdLhU4q6k+je42MkVoZRSJEbzPzvL+MYFp\n+I3PEVHXosashFyhvJvtVgQgvIthlhd4oiOjtIoIDTgSNseOM5ivhfigh/lP\nPgSoLZ7G7ProeDTXtnps0RzDjGsU0sjQKT3XW01oTeG8FdbXfHlLQXcQjSza\nwFVmjuqSulPMJA02QEFH500f67v8+JCZTrdHoz00me+/II/4q6v+K0bCTzr9\nY2pEoU/dqdDwJrwsDXM/r7PcWaQgV5TIWv9XfQIMSjXWJJ5O5NMhNUsoWfM5\nWGJtbY2XEEk083uXQOBenzE9zj9SyHmacLX5GIm2v+JLNVzL++BG8GJGX+Iu\nXL5FZmJA/OdnRnnke5pu0AFD18gvLhxxY7TRLQABhoOg4WG6Hwp7u6+SCR+G\naf3f9xqPLNC2PdV0HHtQNCZJ5U6eVp8ZEt5efLBnLSelrYBmHbksuDqDOt4h\n/lFs\r\n=rM09\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE9l5r+owjryF9RX3PFYLvA4oQ+6KmdshCZkUmSbSyvrAiBH8+5EJmtWPS3lAdz3Prw0OxFyBJhdVaFsj3rSvho5AA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.4219bd20.0_1588635090645_0.9898742563849341"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1d83cf6d.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.1d83cf6d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.03dec929e.0","@material/mwc-base":"0.15.0-canary.1d83cf6d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"72586b3b03638e183dfd5440f006b405468a37d1","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.1d83cf6d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Gm6S3IF8kRQgi12TkTISnOQAe2OFTv7gX6iPHUIxUGxACQH674U7kSIZMiFqW2a7H2BaLCdWOJqf8nfIoqaNwg==","shasum":"2fd06d08be3c92001b0d370a514095c98feafcce","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.1d83cf6d.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZ5QCRA9TVsSAnZWagAAgoEP/igtKIGnoHtAVTJhy++b\nXGuZjMON39jC7Jv/6VUVV4ScVqvGxfhsN6/j+7Xg6xSylgnhEcTmsqlbMgAe\nHqjjbwlSdgbUF4HAM/NsUsWYHmwz0sJvp/2ydRF2235QzsLpQ9NE1trI+LO2\nSo1IBVo4ViobqGsYL9RdHmeGoGrUJscpzUKkuLTiVViS8JIRlMPJQTzrvOER\nJtHbRaQcQSnWEIe/s6SNgDMwUGCN0tQSu6A9m/oCT31faTWn8fyEy0UiMmCt\nsp27MwcTol1tQdmhRVeYON0oBf5e2eGLN+IyKNU8YwBBvl/bEOGlwMq+d98B\nWyNAbZzC/hjvxooBlKXAkRfBb+ZXsYUFqwFCm6MmOpBG7HnelOs7WsQfeL4j\nPHw2NcetbRBzn8GYyOCZ32Ogk+XlFxrAu+2c4vlGmelu3xaq8BO8WOTAfQng\nwl3UWhlJXTe7OyWXIUhzX2zWka3EgoVyXuFm4iIOcw3wbZ3VQiHJK9z/Buab\nkm5CssblzscQMEFojADIjm3OlDt3T0E1HnEp7OQ01yqPg9jtFs37TT4zt6sF\nw5d5mDdy/pge95dl71LirrAA0UqLQmRxQ35qi3CLsGpKF2ZcREjp7RU1nzLt\n7/XAB9HJq9WWgJU6dGsJm9ZG3E+pn85KG+4FaZXPmmwdPmO5xDq7boCxf2wW\nUALK\r\n=P8dF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDno6x2pEve80zB10xbSZMbk1qpwxY+KaRqydK7CMmJAQIgbgzznrVuZt2GNYxurmUA7zBvk5GWgkLDH1bQK+2aLk8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.1d83cf6d.0_1588698704074_0.050679522574994085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3bfc63aa.0":{"name":"@material/mwc-drawer","version":"0.15.0-canary.3bfc63aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"0.15.0-canary.3bfc63aa.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"00c84910ddd746dddbb2d651a4fe51c784dc78b1","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0-canary.3bfc63aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-maAw3CZbccoXDOf583FA1AkPFaVc2Q0RibOkfrXrZsPSQ1zB/ZzxNdA0vO/HCoJ8IyP5Jh7WjOZmzqnQp4HPag==","shasum":"53a3fa0ce37dbde7c5fae1b97cc0013687a7a97b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0-canary.3bfc63aa.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesay/CRA9TVsSAnZWagAAmx0P/3q6donFfEiKqH7xylQw\nUw4GzaaacExsLrBApBqjoXU6NkLof7P5LqvdJ6nGPXwJhFtDunDqqNe0OApq\nFWoUVw8MCqxsa0xNyKhjfA8gYM1AGMgxhVhDuFrhD/NZEuk8pPyJ8yn3AAXZ\nR1oZgopYKiuYqxcI+nSTPAwwwRd6QtSNf+CR0Rm555rUxq/9hUfRXt6vkCaO\nWV4Jk0+78fyPVv+G1oz9zuk1YnVMnkH8O/yqHIRIwtEiVR+ZaGsDIMbnExLi\naki2eA3oRJG1Qpn6A8le9MzGUG1u9FfMosWwO/vX/vOQ4WNqsyDD3+yqBJDg\n3PdwMmppzefBFwjuMwhcln9efbNBpb55wt7Q8JFGuTt9pA1RzwBmSpTdiFSZ\nYOgQXkXzAIV5xet0Rv0Qts3UL9b2ttIUo+rAhWTM5hJoZG/rmF8xOkQOnkJD\n1SIvNTRTM9ZMK7PiNKLDwS+umWZsAKkiRNdDWZOT1m5yVR1Dki4VNoe//Tpl\njt+83XVqgrcvDY7O4IZKBEBQt/ts2QGcO64EdI9w8xNmBDgkkMi2pZpW9Zu/\nnj5AK+ruNTxUY+sd+r8swyCPo3BjV/U8BIGl2nizEKSQUQ9oF2wlItEK9BED\nvGltVurMV/q44thpXxkSRor9MfDflABbCapMMKJqZEztoQQSZi02K+PasY6V\ns8xb\r\n=fqtk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJN2Zp1bPXBjOYnWThV7JLmAM7LwPflWVUcWSgiTVPNQIhAL5CuBU/w2YMq5IHHVOfLu2DaRqJ6g82JecRf3JG737K"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0-canary.3bfc63aa.0_1588702399073_0.7703528472452539"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0":{"name":"@material/mwc-drawer","version":"0.15.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"^0.15.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"749d0b52cf7911d260027fba833a8a291177ad32","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.15.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-EA/zDIdE2ouNhaEjYeOpTHWPbZlUe6laBzZyAuUGPuCVvOG5yEKQ88yTN/sbIrh2VTmsQ0Uw9+EtxOIY80+5Jw==","shasum":"600a9ec096bd222e325a9336270dd649b475b616","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.15.0.tgz","fileCount":16,"unpackedSize":67257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesepTCRA9TVsSAnZWagAArNcP/3EDLTuHzs2vsIFwBSb+\nhQkXwXsIsJpdQgQOJf5/cFOx5ba3l1HPeldRyoowisSd5eBGghlp4c0qEIfM\nbI8OG+0M/ot4bjxHYjNPr9qOEeb1PahUBM89sZRsAdHjUDrszRiVkUpPmjmH\nQy7qnBE6n1GSlBVhYqM2D+Fo+BX4AG3IBrZsgh1hyEELKw7KcSg5Tn9/DSAn\nDFPa+sSvUNC/j7NtNcIyj1v+RBV4P3SwOFSapGJ0B4JllnJnrIHQATRnTziX\nr1SJJH4dRRKoRNxrG561hvM/16xAifVux9bun+EUklcWTtfVTBVHe2hSL8Vh\nCa5sXluFesSCwVK7ruLxpKUyBHn4Q4iPPOlM16maXkdrPZi4hPwTM/7X5fce\ntrZpdFuFmKhKS4zy+TDlexQJCrwpmBQAhQck/XDkwlv/X6lx8Zr3w8e+bHPy\nsOn8oTFdigK2E1SOZrvsXYfBBDHoPKZMYuoTf/OzaQLLcEyugo2MjM9us7cN\ngPqMu/S6RO9kzFJDD2ZQfKvfPNn1XFyTcExeaXP/kYhiBob1AWSKyxWdyHJp\nhrdjeyplOjNSZFyw/CrC2YJ0r57qEvpMwfZKacIJJPQFfakxy95wB1/SLXBg\nfj26xZfZ+pjYT+E2YTbJ2AROOnBqcvhCs2YPEfVIj4qbA9+Y0/Yalk5qpDnG\nLVni\r\n=xaP7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICdNq4xxQT3YtYiexcQbsNYK1cIZ6uYSX/P8CJi9Bt21AiAprV57HZiRM9SDGFtfHgvSrLGTgYaL8VUcgSh4NC7oDg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.15.0_1588718163274_0.10176050140744741"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1f4e3d1c.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.1f4e3d1c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.8135cc085.0","@material/mwc-base":"0.16.0-canary.1f4e3d1c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"cddafa9ea64276d2774eca727578ad51fda9c366","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.1f4e3d1c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-I1zMJfObabaVNsWE0hTsJPGizB/8btxpwguz6vkWUXY2VnV0FM5XQEAu4NClwFr1YltORkLAotMNNDAHgQjEaw==","shasum":"92eb24d457ef5695fde53ed56d905d3dc234bc35","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.1f4e3d1c.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszRRCRA9TVsSAnZWagAApL4QAJnt+m93UJad3G6BVMrb\n48N0Gu7it0+UnikCjz+FslGvAqXoUMgvjWo86031utTf9XkZueK/HjM7A9cW\n/bW693dZqf619JRK83odfWSy413ZJbOazH8WDqo2eVnwme8nF9ynsXrA2DeB\n0n0RC9hjYpMrnogu6xqyHix106dJ6vzhuseEqIkzIZnQtRiOGbIS1sJzDoQx\n/+cDeZzvDnetPhI0nIFj4TDMgkPD/m1xK+E8kDlzrn/HaW10O0lxhvNZj9ZG\n1ScEkaYQ446VeP145sRxYuIQgwlnmmzkOPD2yE0N6H0jQ7yKtJfAXhKyUC81\nZb+zLBroHzKDbR9Yk8qpGMbFjEkxrNaX2Bhy49rxd1PtcwZ/qO/iMK3DWiua\ndNUohvdkm/Sbky8KXEBiTqSvVsRKwWcRYQbnU28c6BbGe4OuKkh5sK/n1qoH\nlgxi4SjwFvB/akc/Hw4QAdJ9yzCbu2iw+eGbpEYmW/ou563SjsIEcvsbff7O\nXm7r72KbhPEG854AbioqEGJi9tPWe99gdOvAkNR8ZTw/TSnTjxS4uyFeWAiA\nMQY0ZODobj9yO4BJxkQQ1Y41rGshU+UtSs7IzueFE3KjBsrl7KnVNCuBO7Tn\nbz4BiDPloeT1MedRdqqrdA1IPSX/sabkAIcO217SDBIFSCR0+JlYB2dW2FAv\nUYlw\r\n=yBYV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBcp/ZsjelxyLSkHsD5cFZMHCOSZFQGn89q6hq4msM9rAiB/52Yh0d0DS0a2cfE1RONOuJs5OvoGIuhscbnbR2SnMA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.1f4e3d1c.0_1588802640586_0.969466691329842"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bc8759d5.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.bc8759d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.bc8759d5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"bd62828e2f7b66a127bc0ab165f32bf39b79fb0b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.bc8759d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-COxfizMr1eDw83tQzhR9Y6PyfP/WeskgPIBKD1X0ZrtajK7yYCjsIUjGk3OcpmH09qx8ttluSgD9lvjDLo3DZQ==","shasum":"bfa0cd9e6d2457fced3a16439837fb96ab590773","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.bc8759d5.0.tgz","fileCount":16,"unpackedSize":67292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJZICRA9TVsSAnZWagAADrwP/2ZlhKJsS7cyaetF+aD3\nW+xpTCuYd6MLJkM41wzNpKLh63kBWz5w38b6qHccq5aX4ktXm97VTbpPi3Lj\ns9xt6V6TbI7jIT73n7skeR1rAHB0iT83LD9EHGjHs0hfdfBHFTa79SLfp4T5\nAxG9EakJLOVU8v8pZXz/Ez51KYIIcw+oh4/ZhkXxD1unc/kzI3wq8r7DQDFa\n5eVL0PHpBciERn1kZaALtElnsVYu7kSC3gcrLoli4DULbH5jfa5Uzn0vNMQM\ne5ZrhBjm21cF+Z6xv0MXHVGKGquljFRRhGOARl3EMA3ww3g8PejoYXcR8ViT\n46uq27CNHgop1dM0vQ07WOj04RlW6bjAq0nC9UlqxjrrE89Z0blblRTYU7I3\nNM5a3t+ItxVg374uqDKhvmyhQwE+lOmkBhtAiW71pMukZIv23GFMIpa6Wqgh\nZf7Zfoo0QZQ9sCdlt1N8Wo2kQmiEmkeuoOujjxa8B7vzmFRK4n8qb/4uLeGV\nzbXoUi4tLCmwQfSlCgewbfvmfY8vBw/g2A98e3gXKi1DbvYgYWnKo6EmzQwE\nQtjoiW/rIMVblrXaH1lh1QxCaFuc+M6Yz0Hca3ezFinGgxvXC8+1OQJpF008\nRRlbDOsRDTVrkSV+1QdYAqwZmTdRpoNJ8hoTo7DDNH3x/rW1OoLiGxEAF97K\nZ5b7\r\n=VR2V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCER8uuu6x84xFgj8ybqP1bjl1IoC5aeKcQlJeE+Ej3OQIgIWxBxwiYU+6aFkTaA+3/lGK6g49NtNuZocUULpJvnc8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.bc8759d5.0_1588893256043_0.0984240826851639"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d1379acf.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.d1379acf.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.d1379acf.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"7b322d565d0668b9f1c4054abde8984cdba4ee4d","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.d1379acf.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1wx8spOeVE7fJ+Ztorelg6hpoMWQXFZlYbzhSCpdQRVI5YF1TiOVStuAbjFoPliQ993aDjL+lHcF/5lgOB7jsw==","shasum":"bd15ff9a63dceba42c7b3872f12580a60f155d93","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.d1379acf.0.tgz","fileCount":16,"unpackedSize":67388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZmgCRA9TVsSAnZWagAAMtQP/i5gsS45McqF/2ErY/eN\nrBKb8XcZ8DwVagOHDmQCHPoP7S0g5U0/P4fC5nI79QIioeB/NTGLBZoTb+x3\njgtufp8AF5pgfWjXjiSu13pPitCZFTVBs4Mo1NArNyaiaVgc4/syd971d82x\n5oLcpkgkN61VsTkmR5CFG4zVRfLCow6vebainbS0a6HJDswszMqpLCbtJJrw\nvEupKed6LYQGxRqWHSSL/UFEtnwlWZ4I5NHCdf5g7fC/+DDkKhszTa0oOyoz\n0iEktsQ5/ufeDpSlYu7ra5VtG4UTR0kPM5HAyaIhAK5XBohz6h5XTl1a/+Ah\nSRXJUqU9YwrXaTfACxTL30dpfniP/stoda29GPyJQOxHMA7KajBU7yVvvpCc\n/9YyL/75HWsE0NC93FBQjWQHJHwclGC2OijOcRmYBaicH64+hqTfKgf6ch/W\njg5CWTM9zIdr2cAs6ko7sjiTS0zM2+QLhmJGPNZGb49f3tyHkdbbHIUKgM2m\njdpvFIqQcfK9YSRSqFqSvWQiPVt4yQ67m15WMakPQA3jff7CK2/+FDD2iijb\nzGsJF3Ih8syjA/spjGTKAx8D0LUjtfXr9n32qXeJ8TGVVIJ72+K4wQUOXeyH\nM2rNvUJeo1SAd8eD85UF50oYzFcDbkpRr3QLWjSJ8fzcmyyVjPFD4o/OAd+J\nNUi9\r\n=71s9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCHxxY8nGlG1OwebErJElrqgzrHvE/HIADXka/8wftWGsCIQDHHwWnkGpILE1rOtj0xfXASdo6ry8FfK5isr+5x7z9+A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.d1379acf.0_1588959648521_0.8964972581288926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58d51fc0.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.58d51fc0.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.047e6b337.0","@material/mwc-base":"0.16.0-canary.58d51fc0.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"095d9f72ab7ca9994ffd376ac6b1b0daa4c99011","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.58d51fc0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YEC42Bay0V2goGKBQC3IcElSU3ymzdrC9CF0042VaxZyMkkG94phY5662YJaSC2Z2jvkVIKgZjEQtDbyZ/ugbw==","shasum":"1486940d78bddb9049cf2c4dfb47c01c141edebb","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.58d51fc0.0.tgz","fileCount":16,"unpackedSize":67388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbAsCRA9TVsSAnZWagAAfI8QAITpYEh0zeXf8wP7Ml/C\nJqhGBC5UybFBRPJkstq2SjK+bLKXmSmLeOfj0mb0p+aCEpP5xBM2GdAcPr1P\nRFCc1MVeP0LrxyItNKX5D5CXEyH2MWX1Q945o80RYSU7I8MQyAtrZAC6gScp\nAA1Bxp5ci5LrFoG0bwL94z+pbLVe0xMrl1eXzpT8ofDzKN3PQURpBFM6+KeQ\ns5v3dw2QyKGxULL7W9/y2c00vuo9j+ObUbX6J7zWhg/zjdUJViKpOkSG8QA2\nUU4Bu6AoHIXxB7reRr03ZRgtzi5h6XyTK6JvLkrQtOUGb5nW46bctQYZHT91\nmesS+HBT+QSUlMMvuCfL9Des+4dYzEndAMnB5DyKiKgO+fdqppdYGx/S6gUm\nbXfFowXS9Kr8yLHb3TuCp6cUjsU4tK5hjls9kRlYzydufggkzQeakh+et3gE\nYygqPhkzuugXFIQ0mEJWMBSsIlWJZFFRjf0qiFMAJd3G172Cu3TzcMbyKAo8\n7FK/SKEPWkahum/mG+xlKu9lBCCJKc91tFug3PJC3NJ4gE5alN3pH5gtRyF8\nkKJ0NqtvsH4N7cBic3R/d6k6QW0+7purRwR65JiIh4WOaZdEMGUiho6+aYBo\nm0lGPOOeFasVUql1wtwZCuQK7N2Wzf5vEzI3fu/QllVi80At1YrkwffMlKt6\nInNE\r\n=m/dp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQCq6lK39574ofHJzxULVOuj9/2Tf9x/TI/YE35RB5iuCQIfbj4ukGwGEPIM9tkJxUwkvImcUg3P2p0f1Yg4XHCwvQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.58d51fc0.0_1588965420375_0.2968678681742116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.588062d7.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.588062d7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.119e21426.0","@material/mwc-base":"0.16.0-canary.588062d7.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"1b66fe2af3ce7c18a07562e7ad2469074135eec3","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.588062d7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-C5o6OnnNx9HR3fZdBGaOoFvGHqwOOyUOTqgfy/T3FWP/Q5BeuzjoK/HPL1k+UBrB3qoTkuU4TP9krA4qFrnKuw==","shasum":"4ea2ab1f6ab3bf1815c2f5f468ba080637650853","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.588062d7.0.tgz","fileCount":16,"unpackedSize":67388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc2+CRA9TVsSAnZWagAAJpgP/37OlICSp0HYzkkWeSiO\n+MJTFo23s54Mf+batoGJdQE6rsmuH4XNLStGW0EGlsLuvAKcgbWYQqdGOmb6\nST49zY00lqiwjR3Ptsb9hPhm4hdKZNdX3XeWk+3CsQsK4CmxtMyDmCJrBasy\nt7voaMZqkTlDdbu+nnDpcM6EvaXZ7fQjUKezzL5ViLdkso4L/KSwhtjAohS/\nCOLth8Ns1VvDM3a0ch1XAfa9DDdotj5jgHBYDbKNCbw+6GvaMO/LdBVmj56l\nz0W5PsMz5MKos8AJ/IRfxa3NtBKxYpH0W+bSEj0r0PKzeLUVaRN0Wn2ee5ja\nLzuEHG+v6hHQO7x+KzHlIAs8UfKYFGzlPjFcc3G1+T/zvb1pmPDj1PMpUYTZ\nBZun/Su/QQM2CdeQaaHdsbxvioLgcuv8d1Kzz035uK+O1IWN2pgaGaCGgatn\n6eSuhiuVLmY46ItAyA4taw6TZ1xqV703mBO/JncDcAXB4qBSkhkPBEtjfyBf\nUZoN1Q2LZv1SavfpCNFYsNTA7rGF7QHQ+BaIdg83+ju2dQw6jVT8l/Cf2uMh\nOjal16gZlwqN3kAycT64slawN1eq/T9wEhLKmgo2in4Fo9LCgl8WBlog3QDn\ncwgdB2OCZkCe2WbXT/amgJAqiBPjDu0pUeKwJKwmszpcpz8DKZI/Hddx9yV8\nUdRe\r\n=qgZt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICToo+a4xFm5t3pIOcmIhXT2kNDTVDIVulDrgsyc7kg0AiAWFn58HarItHyfJrVjsX5xSanCBa7JFo5+rt9zzuldpA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.588062d7.0_1588972990179_0.08540421953765209"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fa21f639.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.fa21f639.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fa21f639.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"e20cc975825eb5a02be956c28db1cebc2f8908c0","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.fa21f639.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1c448wXaOxs+gVlbeKhpncjB9RFr5TNYONbg27SKVbs/xRVxgdMXR2YAzJvpGHk2lHaSaqYcBa5pRVXSURyARA==","shasum":"89ae8f09a482de3ffc2e0df1e601dc3a90c64024","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.fa21f639.0.tgz","fileCount":16,"unpackedSize":67388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuYt9CRA9TVsSAnZWagAAPSUP/1TDSXDhzvOfyLoIXBLC\nr4Yj/QraaCIoT0SG9EcG6wjwfoCz1/NkKNMBdkKu8nWCXsZyKjJRUv4OFv0G\nl2HCAru0dk70DTk9tmNDeJc3LxC5JXB1rSgHAS3k/nSV7coXsWN7py4R3Uk2\nuJ91p4ocDc9P5qxLOBSrBSFQ1yutp00cWBRB9A6YtlgAkaXp0RtdgvWEqKJq\nJ8U6RrppTUVd18BcnBFppW4D08/fSl0U6+egRNljHhnR37ohf+PM1XSwwC4g\nWLjvCR1E+hSW4dulZp14TVqd5z9iu9EbYL8xgjFMW+Y6MXTzJjkPby/i4VK3\n5yY2TYEbReRewmqtfYSDZMpv/DKtYLI8CzrVBBpqmfyK4f2FL6lIfNfciTga\n+PIBcpf0VBS/QH6wVm3UgNXUF5ip/ET/Rl0rLME6IzsDzFpfU9hlHyHKnq4h\np+rHozupBGJM8GDog6GHsX73mcQlVuDhzfOjmRbOcJvVm+qWTuffGJVr01tR\nrMTLCfeWbIoz1apwcaDs+2ulXlnObwOfWOtyto8D5G9SeqZcz5l7w5HuQ5sw\nteKFDH3FasX5AinuS0N5Q2caNF8nlhUUcSibMMXTaiWUj4cgLkdl4ijnPkBI\nhOc3zSwob4UFHOJaXBMy6x3YXdiGVHetzGvxo8+j8fhtp9krPp7RuGonULRv\nqanJ\r\n=7OV0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFsmhHha1SgE+8+IIxLDsVHMJiEZs+pwZLcGU5moCDy7AiAL2IxzCsXNKavHhHCz3UAKCWsb7JS4qqqCW/wqQJuPYA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.fa21f639.0_1589218173349_0.5409690598703312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2772c509.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.2772c509.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.2772c509.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.2772c509.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-wF4pKev0G/9BMsV1PTyAyiUH9/9WkdZKadLmTW7Ufs1kWOdob4jqpNg+zQrKZ6FjHjqjjTDAHpo/s3s7L8V85Q==","shasum":"9f44c4078b9fd89251ec258ed5741e0df3aac37a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.2772c509.0.tgz","fileCount":16,"unpackedSize":67388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuZsfCRA9TVsSAnZWagAAurwP/i1frsunWDE702i4TemS\n0Xq/KKa55HfAVLABkWDf8kwdbY/QS01aOC5Ph6e70tinWA84r806Wdbc6usa\nOyVpvAda7UViXfSxoU3VWKlY8XAS0qv05kSPI/1Ze/LboIynTqwIShOYtQMI\nEHcwCMoSk/pLS2cycZZMdhxQOF6pN711PJpYM+HktwayscfbLw0MUJ/UenuO\n1iqO7X/GD2YrmrD82jNVqZ0HoUczJGPl30RjpnMIUmij+TPGwd+KdMcK+E8W\nsZQvgzf2J35ujbq7j0CQefZnayWO56MN4A0Y02kjBLmdU2EQEvZrlZzQarw0\nPoKAsLtB2Q6CCdLAcZi7hynDW/tUKIkPIltI2OAWwrm/7EjR8TYymo6Cvysn\naDEcRMBUVLAujCzJNoa73yz1Wx07Q7oEOEcSWggTCDatlf5s9U9w3GOtj1gV\nnkLf7n+uZvp3yX9ce+8CjGWRuQG7Xqo53m5568ixWdaoyows/YtyCcz/mKEt\nxtYtY+xeV1bjPuDx46ZOsAKDguPyEdmsyMMGL2bDrbS6z5GW0J/+/4VxfA7s\nl1J6EgZlixuSgEdTOhoBojxsd6Vbns4c8uhtLgqvBg73kE5lKp3JN9JuW815\naNc+Pqwu3/9F+NVgC3mL1cZSsWHfm34S6QoHwxLJxDZKXZKsXJaG2emPeqEB\nl16j\r\n=3HNL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFsO8Vin0o48jLpiqAUszJtAnej1bxb0/KkScfS+79tqAiEAj0sefyo+rTtzrAjZzA1wrOIx7eUF4a2jndqWaZiHC3E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.2772c509.0_1589222174921_0.5382877086083444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fc4796d5.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.fc4796d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fc4796d5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"ddd82bfd80666625c1dcd7c92fe79f5de6f84657","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.fc4796d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Cuv38fqFaAKMB5tGUkizqxMQE+i9Xg6CopCMyoGxsSBSRmkLv8FiBs543vqyIvyC0mkqAvyFJRYvDMVrLAXbqA==","shasum":"73873ef3a0a5f01f5e848d4c567a8390eea6de0b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.fc4796d5.0.tgz","fileCount":16,"unpackedSize":67388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeua/PCRA9TVsSAnZWagAA1a8P/1dD9Ci9VM/R5UKHcQ3f\nmCgEfpIimGrXB943G5syLJdZaS7hpiu3ZlMNbSvV41+9EoG5MLwjPaXP7NBd\n91ygApWNsfxTDzmMi3PVRaDwxLOOVIhJ0w/MNcAgXzliHfxR6vEzghTWwVMF\n3lXf+cp1Eb5fSfncCV7qugUCYtxqdvnfp49W9UzsyUpkVZnUH2NkpDwNgx2b\n6WimdrKR4C4cYGVo086jR1cRPw3IQowd4erqR43WYka8sNFiyBS/TS3qWtaz\nNbmKlXsHgqexMbrLSFfrUQ70qtgHlfC3Z4TL5KTEJGEX/z4REUJPrWTrpoVN\nb5ZN5UUrLMkSEdczt2MAksBgWizFgGuDJP0wMzI8l2pzghOZHz1Ft4kfKvwE\ndcOp2AaLsDV2iQqsGZr7sDRGA2Kw81vAto3BHEntEOUEAhA4gAFhbY35SRP2\nNS5vi6SDDMvYzVa/sFxaKAJv+uEqCLFKggp24yPpRCDcJjSZ+C3zuOWs4ebz\nDPt17Wj/rf2fd7/HozYHB8QMV5mQujvc03dun8AS9skPMvDs+ibynoKFkPTe\nKuTudGISrP7geZeiHfTmKiZ9W29TZV/HS7XqxPIRzmXmW6DgPqDuevo620Fo\nMY4Y439nfU5mKnHAUk/Bl3ofqOw7QvrdtqjzrJqkOq5Yr9hn5NzuXsLbQbyP\nYeu+\r\n=Ond3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUOCcgo0qJSfLZ8Kk1PtgrbpKc7qFG1WzYHEbaWWP3MAIhAPA1lhgvhyAde2K2B9KSrjf6fpssZoHJl0YKUi3CETHG"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.fc4796d5.0_1589227470557_0.647861221319662"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0d1c5f2c.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.0d1c5f2c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.ed52af767.0","@material/mwc-base":"0.16.0-canary.0d1c5f2c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"56733523245d57fa1e6ebe3caa22ef89bc95e8d2","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.0d1c5f2c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bR4esLSFStkSQ6U5hsiHYZZgmYOdimbGkk6HlNHTQ9eht7DgNvenwxfFPvWJhUohgqnbodXjIpYV6dTcXPf4tA==","shasum":"12d59e536e994080878e748211907bbacfeb9f63","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.0d1c5f2c.0.tgz","fileCount":16,"unpackedSize":67388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucFZCRA9TVsSAnZWagAAr0MP/3QdVOxMqAFj+9ViTOCk\nwMhivwFWesGdgbq/FnKYtM762O60Sca7OMABnZp+ZWHN4SyctNbBCsqfStcF\nM8tq3kzd1MayLM6KmrvYSA+vZJ0ymNkC7mIhBF/1n3i8vRKbCjWFyjox3W1P\nMFXCr1SZTtknF7sKgdkviwk9HrD6MvGZPM8FjMqdO+pfO1aWoMESvK0TOfge\n/xNPdmRyBdAo2vWzfyLvhI3E9MOaQBao8gFHssNy2TB+FowWcysq6e8005XI\n5R6N1dZU3YVQy/NI7xIdpiYHblQiY/8rf4gxIVd1MDsd1mrmk4TzFUfp+w2W\n6aQZ2T4+9HOHKSutZpi8n7bSBa/t5aUl7SwkfnWjQWOrrormucKFMydrYWOu\n76OTzhOrOojTyPuKRLbM4HnQTpXnx2vhilyqOdwyLpXJnK0KlolOuB9zyLKi\nsGAf/9wvQeAv3Ya0GB+B0RWukyAOQqLwS+WvyoAe8Ez31BLb1AdmGdOaNbpF\ndbz8IydLRD+wi4IugtmtN5nLT37XgcQHoiw+NVlD2RJBAixEVPwQ3QGBPVRh\nXS5/4+OCSAJ8g6HJrWFBy6O1gkk+HgncPfdyfldZv1uOD24qB7gTG7sLZTuB\ntLGCu8qiBhn5ErogYpVXneNj8nT3INLLKGF/VRceyEq+92Irx6who2mAIQPl\nrGrZ\r\n=Z3MV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIG6PC9QUOgAO2LzSPU3adSjvAq4eEPupmCiQE4yM7zQIgYruFHdjq4bAEEsSA0dGGbWQ2GC4wGA0myHxKeo7HCgM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.0d1c5f2c.0_1589231960744_0.7287376654125526"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d083d93a.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.d083d93a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.d083d93a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"740c7f6a0f292b586689cce49e46a93876251b93","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.d083d93a.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-PbptGe+LYFiRrsB8GgM0K/J3tRYO2BCO67At5csqd8sYdLnrYvkW2K1rRijko/u+Mq29jMNE233p7qXdbhzZpQ==","shasum":"da822d111ccae89c18669963b9f961243ce2a802","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.d083d93a.0.tgz","fileCount":16,"unpackedSize":67388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuesvCRA9TVsSAnZWagAAB4cP/3YaKrbym8qrc0b1oBc8\n6FcGjmn8FT/RY//rC8TdZptgrSBs96w9kcuL/f20FLmlpsJUFWUD5Qzk+4/k\noD2oQYew+1Up3aE2zUSC4tFGpbddTmfynrj9bXOr7DT8E78S5o7+cse2ZL0n\n2j/P0kveY35B4zT1iIxUVQro9hzyVZtXdhwBh4Hrx16GESlql2j+tbi1G67D\nHOUebzBJCQe5y64i+zzShUYri4Z81JZwC55uJCwCiSpwu56v5niQRghXB2rl\nMJJv6ZYmqqhpnKARe6s2+qrVA09r7oAlMvJXZPPQikfpLDCkTYcqCQDKwERw\n1Pt0pDC63D+PYbxkkhCNIkk7NSLcJ9GTglal0ExDVuQUypIRCdvLAFoYgqnm\nlFm09wT45m6njCIJ8a5taAPE9ZeNTWVBMpF9/wV0qaL0b+0u6kRA22T4Jfqx\nEATPIROWKKIlQQbyxoCJv/TxhPfuv4L+QZdhzWefVBP1/CRGQkRDEVLaMdSW\neu4GrheLJEUeKzD3oezt9WNsXQ0O7MQRHzjyEkfan1gCmgbMS/XHs9WTQnni\nIv+60SdMMDEoILfX+r6UPTnMjwo5LyoCLh9DWHar8JIRcTHXQjGiPqBHHDsP\n6mDkAoyQt8NJD48gcdeCs0ZusCl1PLv8TK+LFsbca7CfFE7oFCa3Y92jjk/T\nkW6X\r\n=b58N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD47h+1BMSk92Ia9u0qVczc91ate2yC4tG+qSiGX7pBJgIhAOSFGpBh2oAJu+fmcSVk8KR3Vc9LXYPWQfJnM3k0dXli"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.d083d93a.0_1589242670859_0.9513896440959388"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c95d429c.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.c95d429c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.c95d429c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.c95d429c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/fCvHBHDV4+qTSbNHrvkk/6oi1SKjL7Y/VJwqf+i3cVlsqDgc+YhwpBgQZkshWTHffuJ6GailGsGsGZx4UFURg==","shasum":"b69c33066a45b269e4dd6c04386da1b13109aff7","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.c95d429c.0.tgz","fileCount":16,"unpackedSize":67388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuxbcCRA9TVsSAnZWagAAbRQP/RpL2pXIjiAxPukZ9MFR\n8swYSfJIXF0QYjmrcg0J2+FMyAKbekvo29v/BgiOnR4kaRPz5ALXo7CFjiwD\nnMtFSruijEC6kyO7mMMPnLWHs7PvgIQ8cMsKMjaX/Db6bTt/QxSW5cEC23VI\ngIygTclYIN/UruBkUcb0tZdVLzqFkLXxYkUKeJEkqvNcDFX4jyS/aObriqJv\nIkChfrc2bwr4BqV/gRKdsjisdE5+NHhhZr1Sla3jWsdIluFr9pu68N+qdJ1N\nFzi+B0ILzapxTQYqaasUdTQEoaDwcFwyqeKtyL63s9yrFQLXnLA7GJ3sGwoe\nYKfaykdJ6Moq3TUaaBTJ8SQcB4gNco8jYIwvuKOZNWZbWq2weGIt4Q8PY1CP\nA23Shzf5SYU7DTMQE1/S4EG5Aazx7fniNTbDclq+yxHV4OoGiZga98fgPYYB\nUZBaBwU8lTg3im0HRueylDpTixzfylZkQNKDcnK3YaAcIrDJPs9Iux9k+ZkG\nyh3sDdGZMuTDdVbftxqq77Sb5x94vVvwGIxYVDjdWdDHH48uKUYfnf0d7n6A\nGxc4Dgoi53kBzSyVhNnLT5aiULC2v0civuJBERk/wp+4G/hKYGPdx5NUIcEZ\nkuF6l8kpnbAcR1SG5mpVbS5Sr3H0/uRq5KbQpVi89ZGtIdMbC4UWpeCwNtAO\naTRi\r\n=m1gf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFpprTTbS5oLUh3BoBSMqk6xuVLXPbncGv1HIwuVjV7wIgBvFq2Sqzv23wx4yPIDgcohhukNec13EqKJBMLrffo7A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.c95d429c.0_1589319387940_0.1608609356825208"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0c1ad726.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.0c1ad726.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.0a371b4fe.0","@material/mwc-base":"0.16.0-canary.0c1ad726.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"9c86cc2738d0075eee9b892c5c2fec842ae62e41","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.0c1ad726.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-PCf3v03ZnqZEIwxvmWrgITpfKSU0Pqqejt6ftgUPH2XkUZcpE0A6dHQ1b3CNvFo+OkEWmaYKYcGVcmlc4KpJQw==","shasum":"35836731f1c33a7b974fb9116b372384be010836","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.0c1ad726.0.tgz","fileCount":16,"unpackedSize":67388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu0BsCRA9TVsSAnZWagAAtBMP+QGhc2GGEmyojCWIH3fj\neqlpHr/H5ZKg1Bq0pEjyEj4W20W1jvtMVtKhWNqUuMA7mJdqGnGd8pJKrYNN\nICXhF0QTs2VnfH3o0autxTI9RmumV2l6H2r1tnKZZzU/4ypf3ITIcCCFIV1C\nc8PnSz6Tu2mjWvtTfJaXYtr5/4VHfwPnf3pFfkvm137Wka+lshZSbuOk5QOV\nM+xTab0BJ1DTFj6UazwuCQfiaRq3jyhcfTuwhE22mBnNJbKRDIWTKZJ8EaK+\nxiK+RLxKBrr0H68GPSjJQah/TEnLfbrhEjH1OZPp8IaxU4qe1drNQ58S/EOX\nvisfSxy7pEP1OF5G2RDdoumvza2X6s1ceJYu5edlMgXG/Ita9EhZ3+vw0Cau\n7i1I/SoVmYxiLIsa5e8ETT+gnxqoEwTqG9jE75vxfbcig6nKLlp7xFvBGgd4\nWZ7cGOSmclQNu6Z8pV1O9z6DsuH899XQH/yQrJmy8slJPayhr+PxP1pMNuaf\ntFck6rcl9EgPKjyQdKsMOgMs+JoNVx26STTGgErNiRls4aIHkgp19YlWUdw5\nnImeAi7nGOocC6jIpLLxyYnBBso0QS5ochUhTePVuJ5Ieg0dWqh8y7qZkSXk\naeKF90L9IbxpxEy5J+G/8bz227Lo+/aQia7jjzH8LB1szozl/EMa+9au/HXJ\n3pFd\r\n=wLnZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDidndLYBm8Z0nQfj2s5jsfH9RRH1eSRKC+kg2ultNSLAIhAO4jaaw6Y5Wz85xs19VgoufWyVh/mDHlCxMPa6mEJvM8"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.0c1ad726.0_1589330028463_0.7123410634250471"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8b6a4700.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.8b6a4700.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.8b6a4700.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"268d44b68432688e310671d956cf5005633aef47","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `string` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open.\n\n### Methods\n*None*\n\n### Events\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n*None*\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.8b6a4700.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-CZQhyyntLZ7YBZ0Cd1KgmA0003Jf0uvyVWxfP71DJiZmu0Y8EmzrsPSqhHixebv6JQqFT/ae+lLtlUc54fdkDQ==","shasum":"4b783aee24006721ade95081bd19e41e5241f9a5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.8b6a4700.0.tgz","fileCount":16,"unpackedSize":67388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevCv1CRA9TVsSAnZWagAAqecQAJE3iLL446H40SMw42OZ\n5MfHNr7Zq7+pCVGX+tMhVfJCPpcR+ANXD9HDr1GtVr5J2Rcvg2dVsut09GFV\nUbeGbptiSgKM4muStEp6Te1YL+H9Guq0BSpiqJkTTSiHabkCX2DQ8q6zwCW8\nIIVBUUmzFHRWjqD2+VAJJidIhKQqYbzF/m52uTzKms6kFB2D2l/hFl401gHN\nFJiWqFbNij+662w+9bdKVGgYNZc3gHOXB2hvEn+GCk/kM3/dM01XCWEHtX2l\nJVqiEpBgy9Yfl44EekkP3uBA2Bq65NEFZBk/qDQ+27lEyT7HgGzr4xwhbzlu\n6xv4MBZpkRgNu2rBbFl0NaFrEC0YvQOGfY1XssDsAtjqDgLBAmLvmdxwr2E1\nri5lKiOdDWxZMDKqoR3cIUoXMv4aAHmzgqkcU8ldVt0IyDb4sdYw68VtQj0G\nkjGCl965brycou2Fuxent+x+rQDsLza97q2w6HB5DmOGbF2b88k3i88/OMDf\nK+vlKfkgXhZxB+wauYL6oZ7YlfQVRPEkrEKEnmv56ukdvIdV7tLIw9lvAdzN\nlY88T/YCXEVyywvicShBejR+yEb6VG4yJodwLdgNgU+Pngl6bBWQa24hrrN8\nTFNxrcyztPYm9hRkVf3/gt2w96whxEAOahbtuJged5wdnEWeqmabifFY+stN\nCyBp\r\n=eAcO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlHlyIvk75cCjcwawzy9WwoHPidk62dQTKiogMYAvuCwIhAMigoIpTMKLE74T8Ohn6PZZ1WB7fYfTBsHlxSjJPZJBW"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.8b6a4700.0_1589390325515_0.3081797186924351"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3270effb.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.3270effb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.3270effb.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"5c72bc76b8ddfb71726f9139d6105a4b108b7174","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.3270effb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-pPXiL+UrNMhV4tJE1WxcMJBDLcu6U7kjEe5x1baUWJy0KikGHeihlx43KJ2UhQmfAjbeebVpDAkHX515/kngSw==","shasum":"e22128094b213899bd8deb96e4f632bd97e56ddd","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.3270effb.0.tgz","fileCount":16,"unpackedSize":67956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevGV8CRA9TVsSAnZWagAAXPgP/jSLrpAQoE9esjYN6t7I\nGMlI4l8UT5ILmuXBM/oKcFUeBpIZ8Jt1rGKL9zXHJsBeKTfeHtLXYxo9IHHI\nLbj/GUom57d9GfGGgoqKmLaxJ0OQz0ye1/io5GoEoSiJ5UdGK9eXbaRc7Wfm\n0EPG4g/37bR5HSSV++thcg0L9G6ontO5Sa/O82lWaNcfo54cZoUSAkzJlhSL\nT4TM93tEMpvysSY8c/dTY7drVJB6tOh2u2KmLbLw3/tEk2ShF2QyTBLnk33E\ncqXZdmDdRYLhvUkPA+8NfcjPfCvaVwI6S84bwRdYLJi6cONwpHJs2WdyGsxG\n2y+THh8gciwqww8hu6qX6+lCwhuKy+/e5nBNkYcCzdCYbzqYjP8ZJQ0c3Vrp\nHMot5oM41h0xmX7n9Wxp0O6AkihJWpP7k4PbzKxg8NzkDcGkSAlmKjvQy5IB\nBaelROLE67QzTM/WjtfzLHPH/+HMUfK/eEoDUxTgOe4jRYx9K987IcU7+oqU\njakFO9q0Q1Qi9Gqh1oKYELsWIQRc6d4sq6Mmm7xV5e9y7Pwg+vewVK+PORIr\np3IBbJXBndS2bOPFpXa2C8ZmlU+h+29mV9VtUiEJonPxK2apwr5y6ownLQPM\n8o66Nqcv3krCnNYEMo9d5pA+pItCcyr4fF7gFJRt2r1MMcB4CVrWJxgDbu30\nay1E\r\n=kyI1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWqnTEnRK4a67LYASXupTsK3o/sERxN/N/CjnC77FzYwIhAI/M/xU8/fkZfkBsDDJ9EtUgXdG1Nez+4svfcDpv8IbH"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.3270effb.0_1589405052334_0.8651622066632454"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.832e64f7.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.832e64f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.832e64f7.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"27f7d1ac979b6af26982de92c2f2bb7fad00ccd1","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.832e64f7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9fvnBcsPFTGurCTYtLt5qHgf73/hIuIGRdIslIJHk3aS1HRt/MtVn/RrAZlBxK6JylaX0BvYLXTuF1OQHeGYoA==","shasum":"1c94ce34ee5908e74753d045bf76376264511a67","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.832e64f7.0.tgz","fileCount":16,"unpackedSize":67956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJYkCRA9TVsSAnZWagAAb7EP/Rs+IXsimQvI84EbdvVf\n1zzaUeKMghR8HstOAEKigPscca42VZn6I8l28Op5IW9CMDRiXRiG4iGDgK/B\nTerfw5NrniDern3oYcveEq5Ricq1scUZzI8RUu9WuFaDugpGAlq5PYipnfY5\nYyUd1lc5kUBT0Ku5USWvkJOhqLeXL+hRFM8Z+vnLUARoWrPgsN2Qz1SsSTZV\nSIpLEfmR9qd+dn8E+TToduc3TlfjWOZYtBrjTFiWWev5yfQBacxl4tPi5k42\nypoD58yBvRAVo7bDGiRASN059h6ZSoFMd4576IoBftOXw4RzOD8XBP8Skhly\n70Zf+gPLInJiHBXBYIfUaJ0zSBPIKZOJsAhGoEaxMPPnjLZmlVERbNWJNMzm\n8swtxVMph/4Uv2mM9MRmDE6E1rDcTDgAq351W68UrnzIqNnNpqiM4KqVp4BR\ndJusGwSCk0tGTgtGKd/0+LFdWNN+xY1rePTuzA15yzbPMbxo39zheju7MfPt\n1guycYkIFui0aKAgbMguKnGifq7eveRrNXMQxdxG20AmWoWZ9kypNhLSjvX9\nSOCCmg4czMHG/KQED1L1HehZd+V7XguYEkT8jQPExjUlHN9NkyEkLFKlNM2P\nKId7584SqNL8G7emWKluM0wOOtVqCKfEBWK1o5Upx8T/zPs6c06CeZvDQFRs\nOl87\r\n=vlMB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDH75Pv7WRl9gXnAw9DntzbIj6mVQIcaTXindFFBFbaWAIgXzvJGLl675YgORCs2asnxcJKg86F7mxun/W5bTNFSmU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.832e64f7.0_1589417508206_0.4306595898574854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.472fc4fc.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.472fc4fc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.472fc4fc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"0eb6479ea05a7af0418b4fb939f915e39af03923","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.472fc4fc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yFaywRao4AN714c6O0fJ6N8IijQcbi6tXusYl0VMT1DPOmlNsnvSa8D+ckbrF65B7AQD8R8tUD2lp46E6g3Igw==","shasum":"138a77fb8fc440507733ef1012fc6bc8c21effa6","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.472fc4fc.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevLyfCRA9TVsSAnZWagAA6ZIP/A60AgZz6EQnpfiZ1xbT\nn2Uy9cECHmd5m21NPvTJHg42gKcUpE6sBgnib3MKfqLNC/pec8EDR8DOSEdZ\nLLOk3a/qoHjcLflFJyRrpg6xpQwbsHXyqZKTVux4mM1lDF1D0ngjJ9q3cYOO\nUtDEtncsUAnFQO6q7JdAGUZLSRPq4TdDVJW7yN58fJs5eP9inoaywyZhlHjh\noeKMijziyIfM220mAA6pyRuyymOW7Zqkf5fUZ4ZnCVKV79TNn6zwlEsm/ZfA\nE4PBFqiYonHmEuzI9caHfpZl0vEBOikq4vkYCLkGCZB0ryhTHahNqh0xxVF8\nifQG9x5QMl+qgCNlpZlHOMpWU8jkxiPNwBvOiZZ2vS50e1qVJ5ApAGxSmdJO\nxmC+1YRsqzPV8vihvC8KktH9XhfWkoZ+dV9F0xL/SYxHtgtxo/w049qPFQo6\n8RhHIaIEcALUnVbJCHghyr/Pq5T6XDheUeWG6WZeH0sRWiGRLqHYQYBsT/Xw\nT3GRytH2TvRCCd03la/Xq4ZsiPAminbCVBBtVzck6dwsyJaYUw/DEgAkdEZN\nNQbd66CRFCIAtsLvotX3lQAPYa2hos6T0bOQ+1RoXPYsAQ9oXxuEoRjSylnH\n+QjU9IE5xkPquH6KHsEWJ6RaTP5OY9BLwOYj/Ye07MnTkJMuD/hQ/JDEv2A5\nYQqn\r\n=Xkpm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFomFc2aSG3YXuAdFmC2jr6G1znOig6YEsI5wHkzNS/2AiBdLLvFVYZeli9OCu6z+zmbDIyZwD3H8L0F/UyaH4kh+A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.472fc4fc.0_1589427359542_0.8455841796108681"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.4dcd7dd5.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.4dcd7dd5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.4dcd7dd5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"a2b512eab44e739c09fa66cee4f0a65698e697f2","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.4dcd7dd5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-jUcbBNAfjon8DopwvRzaPGQSrPRfB8olXDWm99+0x3WGoPd8kk69MQdI15YGWxj6v1+DBevu5dfFW0Pa1Pya6Q==","shasum":"44a9fb2de2f23ec58ad36c5bc19114ba0c097773","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.4dcd7dd5.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevXCrCRA9TVsSAnZWagAAUU8QAJEWXNf0vH9fS+9F9Fg1\nMy+nbYIXjB5qnfOf27GbnV/QB7Bkl7T72DPmdxHMpnoI0a5wduZcCAa7dOyj\n+KkOgDxsQGW1ispOiogXoHRb4XyX0D0U6p6AdmbDqL6ALHT0vPBMi4jwYEYP\n2Yy04s57BWgXBJ7UYS9oVJ9bBfQ/p16mxA2wrobugb9xnIWcT91smtkFK8FO\nuyVc8toI+AB9YLbtOq9cKednPyyXd5TYQ9iwT3vlgwTjsgRQMOI5xJiNiOQo\nPd33XYqSOdtqlyLJ+hCkTe/sFye6jeowL/0Gq4KHpC3IIHlOwD28V8e9A1C3\nkbkXI6YGSUW1HvzpIb6LfnN5rHXXHNkNshXuPT9nvHZeHPqoGaA9ujF/IuD/\n8NSuVZhcbHW41UWAUDqQ06bc/SxnPlngcymz8vuAyaTQVCuh5N0f71MkNLHl\ncXg4IOH3yU6NzAtrCgoWeWvfj+rnyJcXhZsvwzVPTa3SwG5oSknXfQArKvUN\nv4WnORQeuTFNezd5YmWhgSgi71YvXmnvcaO3EBPLKu7/zfUq5WPmRgVsrMNq\nV4wPNv1Q6ruS9EpOzI3GkJTQ/xB5+XrqRf3EJl9CosCOxcX39fPtlFxPXRG6\nmZrhPPEkgsIbiQnHXAcH2OEMun/gvrWGNGbqH5HaQy4fpLmKrw/cmzN/BRsr\nDjGF\r\n=a9O5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4yp+MJ2mYYWTKUzn69wAmDnZd8iuXUQfkRwZSRYUgvQIhAO6XczFXrCeDXyMIcuok3IY/3YrQ2QFvADu5BfLfeXPz"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.4dcd7dd5.0_1589473450533_0.3212590511389217"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bcd3400d.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.bcd3400d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.bcd3400d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"dad5f0740d5be7e0efe9c5037afabbec57771668","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.bcd3400d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-3QI5PZ5jRf+P4hQiLt76uyBcY2gY38LBluIa1gFO5V4eMqLZTad3PNKQf3z/f8uhcuhkGPcPZ8z07rTych7NQQ==","shasum":"726995291b49186c81ad6721af741118ec7bccdb","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.bcd3400d.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxxzCRA9TVsSAnZWagAAV3oP/ivWpCjwSkOklpq29mI9\niQ9M8aZmyIaoL0L4+jYgE4sN36q/ZbMoW/J+SijiEJhRXH1mJa/bgt30Sc6W\nh99HhEC+Jy5CAJK5flLtlZjABKyBhxHYKJMEVEbp546YJ8SahwMElh/LxVQX\nFPzQ1pIeXh+bj2zQs8zaAgYKtDTSzU1iaJE8TqAQTFob+SPpe+i7lNzDi+kx\nAkL2sRUayt2RckatTVmZdAT+OYStiAsOwl8fTN/iWDK0WaNMrt4S8DGaWiSm\n8umOoxL2s7X8azxgMtTTRjAPbQ8bSfxgz8Rz4T5crfNHZhOvKOCLycwRdGjb\nTk7ywfdRNinIrHp6a86fZzQBCl1npln+t48QPENGBD2v3h6M/K1Fm4UeYTAD\n3lD3Qfik3fR8mhC8IgcHQlxPHKDP3HG4YMqkUV9/2tUILPGxx1eH2tFwz/lH\nw7RtXkiwUIO///X6G23tj8FCpW9IOYW3WEgwEobRxWWZd5LxFB+lrKrB5lXg\nPU+HtKbbzICJEK17EUO6f5JK5XzLuSgQ+Lnz4P8JJFx21egOwh5Fvt7ZdXHX\nRyDvme8tRkfijZk4Ve828aitz5X/+UtVlFXXQpwUVn5Symix+AO1b1k7tLDf\njMHZdeDLGj3dkUHvCllfJpRrJXqEL69SYCkv2+BACrqJGYcYgNMHK+3C6lB0\n7uYc\r\n=q6DJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICXNA9vHGllDX5/zpc6KrP1RszAtZmYb3mqnSXMgTmaLAiBRPA3usga7ev3QMeK7U9cOCInXBGDi024oRjGpipyskw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.bcd3400d.0_1589582962659_0.11052569871064444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.91f63179.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.91f63179.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.91f63179.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"0e5622d76bebf9f0f121549fb3dfc9bce15378d5","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.91f63179.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ifAWtEqSKd43l3tBMYyBFZo54koO3Gzk18AcLRrxBJ2RMF39QXaLvahZ88N7PznlU5xYhzAgwn+gGa9G+kTuUQ==","shasum":"1d5d6dbc71b64a71e9f0ba317dd14327380d8187","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.91f63179.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevzUACRA9TVsSAnZWagAAunQP/jTUzpE2vP9vguXeL0Y1\ny+QR3/IoyBWkqpBDmEhOoY2oQfz2IJGJjDnsh1gPOzzusg+hHgxPTqeSbzDE\nt+RLQ3CoFk+AE8yKDYWnASFXvaZwqEfSeJHSeT/CLBxnW8qacdICYpv/QDN1\nOblmlwVIIEKH5IizEvndQxwG94zRjImnh6R2m5QfFddKXTZQmcpgKkArI0e1\n6nh+bEHoBqYvRZri6vl7kvHac9wLQ8AM65yK8Rt+SgYqF0d+C8tN6hijEp4s\ngNd9aaOjA7biXIq9mO95gJnO258AgsA+BRX9O+w9y/aTfUtaQ/faV+438jNQ\nLfjursnPlV7lQch43e8w6tyhlI/aAW/FUqjWjKu9RnRW+PS5gzmDp2JVaFmV\nZGQJUjgnN8qxCTIEvfugYJAKMNZpPnmYd1zEWaB6EXpXYcxPDOlIVs350Gig\nC1dHw2J1IYO4jFoPv0c/jBDYBUUO0HgcBDma6AnOJsmmLVWCRefumNL0vdnl\nprqFPLh0ID0ukWLVD3H24Pa38a+X9V+h/RRHLSPB1LodJso+E1tSjM7UxLlJ\n0xZVU7PFLUyY9WPp2Rqq0v1GI6ToFK7vcjWDUWsH/kXVFv8AQQSdU8VwMZ35\n+zAK0Qkd6YB9sebdzD+D3BNSE3pHvYZTPAPEsQzIN+sCWmAF+d5g7b0AlI0d\n7LYZ\r\n=1dPP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDl6fr8fjPGCishmKL7JF3hnrkYHej+huFVEDS1w3ioBgIgIVP+quOX4DHZMQV6N6ppHKw7nIy+6gZVE5VOHvqROe0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.91f63179.0_1589589248336_0.40721843520075685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b8aafb56.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.b8aafb56.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.fd8f8f2b7.0","@material/mwc-base":"0.16.0-canary.b8aafb56.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"cb4a37dbb03476df8ec3422cb9bff794468ad220","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.b8aafb56.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-qZAD6AORf9jc9VKbxrRBbkMapvoicEVyOyIONsxzMYV0dYjHFqJXXlwOK6ge6N1wVKMmgRSeQY3CwAx8U99LEQ==","shasum":"da0864e861c1216570f0406605517dd82a298bdf","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.b8aafb56.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewtRuCRA9TVsSAnZWagAA2BoQAJS6K5drNfFfeSPVcHTq\ngaJHQjw/AA0Evjj+c4nQSx6XJls1PBYkMggI5fmXPWcLmEC5Hbk3YchrMJHQ\nvbr+Rfi7L//AUQpuszlU+pcPh51mlsHXAtjlKEJSjGTSBFiIIQERPEi3ECQv\nVxp1gkVzH71MTWbKWYjpyNIGPtB3fAiPA7fLlCtO3B4B26NLTs4jIN9vxC5h\nwX3qBSPVn03QYT8kLgMeKcXlDYD/XSOHs7Sv4vwNofLqgnuYA3mt6JkvjLVu\n9S1mvEJdIyjM2GR0v8IQfJ0co8UAbZOiLDKlieh9KD1Kgn/shIdlrW4dRuJb\nhPyADcxGKMCLCaMlOiKfH7t+DrMh86cjIAIUAtTRpTvKuf63M4DuGNX4H36m\nePj08iaHnwSZXlAcAEVjagrpbgJH7ntAjIA941iD/OBbiZ+BMRP/8z7+5ibW\nZydLCFAbpw9d5flq9Q1019mi9uqooB2Vt32Z3SiMxjcNHWIx6bxv4o7XTMcs\n/LpaV2V8m+0ngqB8PF2+bVW1FGbpW0RnS+uPJsPt1eyzIRmODGahl2PnTtWV\nOmCGMDdVJ/BuFH1SiMfaUgNsYxUePCnd+UzRXkbg10QqkbkmZ5iwkZrwTPmo\nQ+QrS13k/4TwKL8rHP5C6yU3yUVhNtCr8vcJwpDP/rp8fSLVEleplO8sLnjK\nnOpn\r\n=ieXg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuk8l1zWe9KJIVnMD3f5QAcRsxpEjaiic1WpyErsZOUgIgBpF5pWC1xR0wfb/VU6D38F8tLlCYqDs7Ld0Grc8JSys="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.b8aafb56.0_1589826669766_0.914123251117718"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a564b194.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.a564b194.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.a564b194.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"88e988925ffe167fc3916968d88a99b85d5f0319","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.a564b194.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Mh10tWoVRfhqhsBMe2oSHpW/gPSTwr6z52BsUTqC9tRdmobXSfZZf9ULQ0cPF9MPBi+4z4lfRwTHTZUnbeKgZw==","shasum":"938321e6ceddfd87895336bec42efae6db98a835","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.a564b194.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxQqCRA9TVsSAnZWagAAdicP/2/x1oaOVerl16BnpDcF\ngcsjNa22tY8JC3iwSAKLU/3mw5utCSRFTcghZTEGnbSKoET7Ya2Beuh8rc0Z\nMbocj40uR1MUOiqyaw/12k922N6lEUaHH0D7/ef+1bPDragaEkEFydfaMZ+/\ncGpmILy53w4Umw1T1nQ1Z6BPly/uk3mdvu0124YLMlxeiPutdxdtHUXlXV1J\neXyq/x0os9DyHw8G2IYBD+Ai8uVWVsMUQdkVLNMti3sV/xJF0lhpQKAbBDgR\nTe1KIDdkPU6MOhvk2q7dSNib0LGcr8wORqjQO3Q9NsVP8hZo2QJQ+nInGXKT\nDSLg8wvWMnBg0ZBuoisnEyvxShjVN41xQy4lJtFKpE4SSPjoUszxBO8x2HHY\nd83m+vFbkFDxA0X5lvRoDwtAUFwm6zR84LSerG/4euSPXJbp3RHkbphjh2tF\nWHIA+QBHcsOu+wH+YJ1DtAYdSLaBYs8lpzhgSuBKnOf6hPMSkd0L3SL8C4qj\npy1M69EG5XDjUyl7bqsSDa4y/EZVLtw5pg6NvWCqHi9/7S2G2j4mB3Z6f3D8\nKOIcm4AUBGo4vBwLWYgzqF4x0r0C6/Ur+8u9cBfsaWWiOLKqmALg9VdBX7ws\nEfM1kT2Gu+tcjLj6uYpuQfTmsflccgA8LMNSiSiGp6mLJF70ONHBkSkQeXi+\nobAY\r\n=dm86\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJtNkJMFdEwMRsj9ToS8tieqpclqgHlL+ASTYpzpg7iAIhAOOy/5ExY3Aa+37ClOg27zzttJmOZCRqSoabcmvRcbVm"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.a564b194.0_1589842985479_0.02527993599888001"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ef56465b.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.ef56465b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.ef56465b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"ebf59585445179b39ed7a77dac598972ce48066b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.ef56465b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-wr+/6SFPDsqlqn5GqqA4Xaqf8fU7Ms9C5YvVjORcp9Zzrp+ITIjKVLmWZEnsBx0645ZCl0PGqrMiRiegxKiXLg==","shasum":"fe0b9e777822c0e0aeb868efd00d1deeeb4998f3","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.ef56465b.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1bPCRA9TVsSAnZWagAAWiAQAJTEkLgw5Jump6UeMs4v\nWoIEeEZXMiWfnZPTICA6OGjMb0KmTPUuY8tfQTaYNzIUz7uIbwY0zTx//rlf\nSoHUvUGyHBV0P0UkLmHpMMSQqsrnlkgI4SFRbRsR60ue0bcHc3RBSRxFJhR9\nFsu6pRX1wjHQdARkkOEyzeDzRxqlEECxIqwiKX2pI+QTms7Vbou8yaeJKQ4x\nzG7xMV/r9U/rD+CdyK8b6sVTWtQRIcOnkwaZ/vzzVkMRL8R4t2zAGYr0VoPv\nQl1Sb+dTz3h+R23jhil8FJ3AdMQhPBEDjhF15pSNFbxWS+sbPFI9TA0/Yvdk\nSgx5eFE7sMVOGkbktX2PhsL+uPUPaBIYvlSDE3HRkNqKiTkwFmCDzQ8X4r+R\naud+FqrlAiLOO9Gl/nd8pA7wsfoMvKVNZ0mz+PNj8Y1PIWUSgXMoni2PS664\nitrN1kvlKcnWnrYhwqJsDFrTFaVfEFr5ElEUeaA18CefAu/P4cc4IR/n/BFi\nvpd+sliwH493P1aeq+/qOU5L2BhD2z22gJSnWCfZ9SQB2OQZVtBu5WeZnwzY\nXrbK5Sq8HbW4uJn009Ym/cYPuIFGMJVmFu/8A8jFEQI8SOMxlqz1w6DRPfb0\n82FJmLTGegYBujzajgEwdv9FGHtru+Nb09D3bYWOKotBkf8TdtJ2PGkYfJJ/\nTHtl\r\n=BFhi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFgywhGc9NwJOXGq9c6SfoOMAjUabfUguBlQlxT+j4TAIgCkhxUy2pihciNQvLQQgklNuhaQN918we9+470LprLYU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.ef56465b.0_1589860046872_0.06564052750285665"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c22dcd71.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.c22dcd71.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.4497b86ed.0","@material/mwc-base":"0.16.0-canary.c22dcd71.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"6a706d54228a517263b38bfc1185c9ebac4aae41","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.c22dcd71.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SeLg+ScDTqFdfUs2IadULdxHHZQYLwf1VjMwGArad/F/nRsWuhMa5lH8daLW9MbrT5qfcNyh2VkKZ9Y7Sm8UaA==","shasum":"f7472d5723d5a73f88da92738983fc39814e4845","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.c22dcd71.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBYnCRA9TVsSAnZWagAAn38P/Ar0QDN2HS9MioAhWF2l\nxI/1+0MpbK7bXt/fTIwmF4oay61mn0iRylNVQHcIRCa8R0IsGq6hwrahUI6g\n2Fq1VG6Gswm10YGYJdhnMwbSS7LFMyCAvNpM2PKD6VtDkLlZIP4SvVFSmDRI\nOx1qwoVqgdBCvcHAl9eXle+y6wna6/+7+4ZSybzOZUyb2N1Iy2psjTydSThA\nEHl8+3feA/6OrI2LcE1DlR6wX9oM7xr75lJE8Ow5v7RSiyFVezORA9km7tIV\nwzky6AREvb29VTHJDyCvodYv0sDmvToJGek4JcBj2votKnl5BGveVpWYhqXW\nQV4LexlAlBLLZWRXBHcabS/33PIqtBK3TR9InMUr1A9cfHf9wTAIzBaj2aFL\ngwVdcPnhu1+npkoNd+xdep9AosAgnez3pjfzu03I5A9WnMplfCFXM1hgOgDf\nqceNAQ+co4Vrv9bmpKUdpXlk7AVVRGktT950eJWpvFUoK8GPxFvstCI6TwWn\nZv2ueJrxgcrLdk52wFGx47R2RASK2QX4Djh+IWpvsCWw02zf7WlBUfYweNez\nosfpnU3UI2IDvJD1jU2L/Gwj5T5XwW6cimGJBJuCoU4HgVdupHaonNPmCXiV\n+pIHp4Lvuob1hrIGmEfxrRj4yRE6su7hCYPVj4D6ceisolHJUmlTa39IMv/y\nZhfa\r\n=MYqZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGbn6WFXH/hOccZgwRvltEnJNB4ZbWmHfJ6X1fDiIrSAiEAm045cMyydrivFTbXH+4HDuVpzul0VWBfgGedhP/3en8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.c22dcd71.0_1589909031053_0.3435364218632435"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6eb62388.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.6eb62388.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.6eb62388.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"abe9e974102de52260c3cc1347abe8592e0d5e7d","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.6eb62388.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uhUAvfSsgvF1PAj8r4SeG+n22sp0K/Rie4XJwHOrehcLLYmSunMDClnid1BbTZbI3AylmRQFqSRxd77VFGXymA==","shasum":"faff4f9292b19f46ad6167bfba47eb03576525cc","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.6eb62388.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEOmCRA9TVsSAnZWagAAxwkP/Ag37cpqtShx5SHoFTII\nbwHSSqROBPQYJdLfDJt3PgJ5xNGWaXOlMOgQTZraCeKcbU3rktJ8e3TaOS7z\nnJwFunPcp9RpJZbLKWJvlbEU1siPZceEcNWyhG6q/yM1YlhpCztjp56YDgbo\nSpTQ7c2Yh+dvFusG2UOtr6QyJTry2Jms/ftY/iIQWfLqFip/P5UjP1Cpr1pJ\nWj6Gnt8wP6ER8PnktL6xzNoK1qLyD+KZ6DcAyBuvkFIDE06KNn8tOUaZCKTU\nhPfeuundPHEHxDLRB1HJC8eiZ528tLEbaGG/NzsES3RMOV5YQy/1MPIIZ/hI\nfEpDBSYWAwusOLV0z3pqeDk6X2i+NIBIRfwCXX+u0kvLWrw3gs2odiVjMri/\nw5vermXCTooBqKg6l8pjbByMMca51UTgaA/dVOR9BUuHAjn0uOdaZ8gx8n3v\nw/OBIuoebkcp7oUKN8sseG4wNME1A6lditG3JaF2kU7slmHuQjH3OKpiRPKq\n0ZE7fRmpbL62x1MghdCRS0bRx3wfI0VUxByXHnUshJN2dvSt4StGmpNDPhCP\nUoSgs0i6fbrJ/67a8MrMDQj5QQqyHpOoxEoi9bUq8bnJQm4LjwtJUgvz5Hsh\nscPH9JUh6jOQ5I9JCVowmEjCYiwB+OeYvsIMUlBEftN+W7mdEU6xppq9h7b1\noUKW\r\n=iNOL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFXoNVhNbuEwneBeV8HiT8iQyCTcjZQ1pb9sgMSrSxZJAiBgfo1CSqaAAPxRv+wzUwcT8ncN1HGoDM4uTXzpdYKYwQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.6eb62388.0_1589920678121_0.5242214951554476"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9bc3230c.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.9bc3230c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.9bc3230c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"f02ad2a44567ccdf91e52b6e07f5986d49d2b375","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.9bc3230c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-PLY8oix6WdJDPVOrMIKO6fFIGiztqdtOlPC/dTTSnwLp9GBcNfxlt/WMW+NhaSpYxh7CyV60nXXW27vhGygo2A==","shasum":"d5a508b6558667228636bcc1e86a0d6842894285","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.9bc3230c.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexFGoCRA9TVsSAnZWagAAiuwP/iWtqwXgNCv60hJze2bn\nQBGO3kkrxVPiKN8HcDbe5f/t2B4gqGT2MmRcz4tLLQqu1+Mj/JRXL/6GhvrL\ngjTCB0xNqUN/B3FJDTOmqofMEY6bRg/wnXF6ug5cQ9cJsiq1yAOobFQN3crR\nUHfRvv6yv0SZPb1w8bIFF7Cfucv2+22twWePw2PkUaJREu3DlrCXg0xXm47y\n4d7tjcLGqladbriUvZ91UpLaFbu1jjFC1mEIWIukqmZI/NK9wC90bEikznWa\nC2YlJnDedOdZwp4CMDzRAEW9pBJ+AlVW8UTauGwXzpDRFmdFCMpXm88yt6uI\nvpUKKO7X3GKkDVhAiisIkWI+6m6skdxrhlbji/Dw6/nL6c5DIDwCpcFNcwrM\n3le9sJEeTaGHiJEW8LvUW/OP7C9TOOngo3mL7c6cC3tQpJMpwyYHQQjl4OVH\nx9+0JwuTDbJcYAnCmf/7A4G46210DXw1q9b4QsyOoSmYPi1PEH0Muc6b4TTU\nvJDjmU/Qc51vgL/q+40mEXSTEP1jnNbT1pSgvqBFCOAao1iJdXrw4jWXgYs7\nyUIpTUR0hSPpXJG4YsRFjfb1UmeqiH2S6mpgQ/3SHPrrxxxLpMdBKnSfiMt1\nSHc90c3WJtOhnbHHsyKI6PNjg3+1Ug6+ywyuMzl7nShAMMY/A/PbQH/bXZ+1\nObKX\r\n=HsaB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBwgIurmx7SsuKdnXqqsz3lo6i8czlnCWwyPLa9nXepxAiBjm3h3RJUydSQJkXy7Y4iLt5R/wNBALR8HWDFzzdQkbQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.9bc3230c.0_1589924264038_0.5216513301208501"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.421a6856.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.421a6856.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.421a6856.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"caa535baf074d026cb6a6f50dad38341320274de","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.421a6856.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Fjp4u6G52saftiwtzzdbinCQk7P/MGjlLOYfSM8i4E4QeOuZenmtME5ip/Y4Ac7fJlZx8rwDzJiO6prsYjYhsA==","shasum":"932ef46ce36738bc52fd7871cbff85d7d62fa039","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.421a6856.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexL7lCRA9TVsSAnZWagAAoV8P/RobdJILeTWIodnZ7V6Y\nnbLq1raLapw55seIRKOQrsdluYDsYavfcAs68ppF/ezquD7zVrEVYHmVuRQN\nF9tKBI8o2jDRNgeX4MyxjjsahImw0AkILF4RvfcuRyayYsSWzDWwHLjqK/TP\nNBK7Xgx7Q2EkQqdbgOt+SgfLxxf90qnjfByUbC6EK3S/gFTZmq/sVXdU+IfB\nk9enRMigcHMMHkIceWi0+n26cJSOOjvkh8mdtI2B0+yqz5xzND3SZWmGanHj\nOsZJ5y96p01xkdfUtdOfRwIj6BdWUkAjDEXTYnHIVCqspORITZT4zHvUCs58\nhUjMkPG5+yjkoWmb9ikidsO+nFcFDmgmd90ZBtAeYSiwWocN5jRnBhHZsKsz\nzveHJJZt5wx5AA+IVuIM5+19kdK6mJBZpk4LjSZXRFRKRvMWmxZtueGCcBq5\n34i6RZSkbinEZM9R00JHv+o3Zs555rINRuc4sDZWND9RbA7yuGMlNpumfwXs\noPb66chy4mHX3JtOW2LG+2LIoYH0Die9L+NcsLjbBT259X1kb71APK/2I0VI\nXfUG69DQsm3kUGLNA8EftsEPYRag1QISjikJ/IFV4SLC9mgtlX/M38GsAVDN\nJkqoPX6lH5tv0WECml1qi1kvRPmak+Af+av+BeajyssTLxO7XpqY2cMyP3hL\nj4jl\r\n=sFf6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCatAiYmhAsFFZZwwHlDR4Px3YtN8gp2KIoN/ZXhngJHgIgabEEkKCitqNYHYD45JR0cjFVAF2ChVLucb9tj0CJaP0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.421a6856.0_1589952228719_0.4415732027673076"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.761aa6f2.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.761aa6f2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.761aa6f2.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"2888b72f42dfca39ebb17e6fe3df0f964d21febc","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.761aa6f2.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1S+T76WYyoltv1RgRus1IJeu4EIkb8mI25c+J9R5szLMIlwYzekjdPIT3IQ1rgDZy/10Hx1aUX0FLLZpFn8rmA==","shasum":"913ab3e765b8bc082956e9b39d7f618381e9b0d0","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.761aa6f2.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaFuCRA9TVsSAnZWagAA/g8P/1dLZ0K48Sv4dy9CYMIE\nKl4IvamXK1mskjlsYAum91u1Lgda0pv6J3RTbMKcl2gMsGPcYUbqtjlsLvoh\ns5fnHiLnwdcdCayqQ8TxBp9bAheP9aBFBu+2Rczqy0OMaTDLZfj22f3wM+I5\nwMWc9s0VTZ+6nwC9ec/QMperatOneUen7nrK8bUVvOCEYgAghOc8FMOClOpr\n/RqFZJoVsrEEqHLZjw7TZV0YMFyAi2hPj/aDmOcQm7PSszRVeclHYQWuNX9O\nfidCsQV01Y3ab6naLGacI7N5SDA/ShB4bTLV4UEu5rfxhOqfQxRt9GmHmbui\ne24ySAV3L3ifpFMdB5MJBXJiAHr9n6d5YHSXzrf45EyA6qCxs89JqlWOS2Cf\nCGifqBSW5YIsu3UmUZfC1nP8ovjM5F8EylLd8vuJ5bPLTfptNPWIo39iJPRt\nks3UPHOlyOhrnVf1NkyxM/b8ERYNzjB5qyA+WqkqrSnqgqObVHUFnOEBZl9b\n0ZpM8kLb/I3AAwGwiP1wt1C7q9lC5hEPdzy3Pynp70got6jVrwn/4iaJTEuf\nX4a3KPG60FfSovB6cwUEpSy5mdrCE9vx0rrnEzpz1RpS3TBQp/asFT1PLCP2\nQi4zsc7D8FsaFcmgjgYCG0SEGIeo3wUsOMNNe6xG/nXeJ3vFC7F8k0s3fhAN\nbV/f\r\n=H6b5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC2TINyCSK7CbLzW6hm1P3u/yqNTpPUO7zrdCvrdll2BAiEAkqC5ZIYfwjfrr8eQ2zxmZfQUFL0/6nWXzNXE6+xlsqE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.761aa6f2.0_1590010222005_0.9856461981325841"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f8654c40.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.f8654c40.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.4ebce8d78.0","@material/mwc-base":"0.16.0-canary.f8654c40.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"3b845b0ec744d5631e466e04412254ba2fba6ec1","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.f8654c40.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1beiXBRjvLZyAINFtbssyQe5QpVIOO8HeTW5nCiqKkSU/qiAFgyvXhriXrenQE2RR5vexLc9ci6ta+LEe0QZHA==","shasum":"3fad68e7b7bf2891e3dac474913dc2ea81947e44","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.f8654c40.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaOwCRA9TVsSAnZWagAAzXoP/1ABMTCDR1xvNP7POFxr\n2aRQxFfczxk1U/o0s6jb1mfE3mMgwgwKf6623Rc4cg11jUHqX5A8PUVCCsA/\noxnNG7fm05hVC1cYGK2H28PlhFZIJo1k/aDeeL9tjbmWV6QqaKCHCwGa/gxQ\nCyZXawMrB0ezBHxA56X6b1PnLS1pub/GEOdOel4j0ISrKPnuzhFE+81f0SyX\nkz0Au0wiARji3YuywA5G5NjQkM6eiK33OMWXC8ALWELumcqsq4D1OtU9MkQF\nCd6eLUOigBxuBIrd5C1qyE3eNTwhxGAO4+CoieTskNdx5tG67uD9zD+TeOli\nAqDm6qx4TSVXAaIu9ZBuTTV0efwgD7f2qvUXj2Hdp4VM6RumYX9EOIpxC4DT\nN1uTR4QgoTwQI+XjPwTKkWJq5KfTuaBDz0rCqu2FMrqyeehwWe4d1LGl6dXs\nmauQZdrW+rVhMq1NhrjLbjvi6FrKzTyifj6CtoDt2dderEzdsaxSQbW2NkhU\n+q7and2hqZtKuo+CoDekp5D7GUHp3MNFw3mc6d1FbCpt9POVSQ1f3GPVboZf\nblvMjGP9SUJabXH7jnk0fHRY1TcvWMgZ5P64M5v7sX7DFu782gWCSm4zEtKd\nQVFD6sC5SHDOf2EBCYlJ8iL+ypqf/ll+oLuXNiyVsqF1D9tk7KJXrh/9np8u\n3RVe\r\n=obPQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB17nFnHyyxcRfuOSMGfCGlJOadnhOCnRjFWqnucF6YnAiAtPGyTk0WQaLnV1xe9VZG0imfGoeo2LI9NSxFpMVZ/Gw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.f8654c40.0_1590010799604_0.7185323064098956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.05f3853e.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.05f3853e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.c67667e8e.0","@material/mwc-base":"0.16.0-canary.05f3853e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.05f3853e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-cL8ld3Dwzqs0wPwV2TFMXiABfaJ4yjCEYpByTET5d3yegmHj0dNSYtqVLhCYdHwdrMKr1EF3w5afY8vtVxeFQg==","shasum":"6641d748e43832a3da563632a226729575f80ea3","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.05f3853e.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrtACRA9TVsSAnZWagAAiY8P/jUtwhdgyT/E4KMuu+25\nBWmwLsgEoOyevhqt+NzNdZITB2rVm1EDX6S/ziGOWgju84vh6I+KELtpr8zS\nXytVcm+sPhseQLnymBfk0+kL8nfAMlTIknaNZ1I3b358lMWnJ4agJBNpnXIi\nlnj9+pmELnjADiaQHGqsi4Bv/fHq/PTxhWpV6qmvW6+cKxs7QLqQcLDHc88C\ndIErN4NwyYe2v9OMIFEOOtGK4l9mVKmjNB4sPWjyUT0AskYVVxM2Xv4ZrZRO\nc4+RiFb0SA9xZYg4rbIjrW5jrd1kvJPcJ2nM7G/C0MlwsztZ9vHLHwxnxv32\nBALAqIUEUh+067n3Dns4dpeVrqJOg2/7dKXIoctJYj5tHNc9FUWuIVsgDCH3\nGljN81XZex6vrvuQx1z8S18etefoLByul28fiENLiNup3NW+BGwfDNGhWTkY\njPOMOwALoWAHtyNIQkby2n47/5KcaLndpZY9lvWeE+hUgVwu39D/1d3KZc5o\nUMm7T3mEhF03YYTiJU//nWOJeApeLkCPPU0ZIHcurxVApqQ1kF2y+4lu2t+y\nyFkwJl/0DU0r9qKvhd4CwkYF7VDyp3R+uhx8paoatCcM/SKb+6xj/epdmMFE\nDivN2+MH9G5HRMTe3cORS5uAuikx8E717mOT2tn14p9ZdPRrtfNb2XOTGN2z\nmi1o\r\n=QGaw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF0XDJ3LfzmJXRLTHi/eWmhuTUfDDTYYMfPhd0tw678lAiEA/zHzMPtIQerLOP4DGk4zYlWgGv+Y8EB3zL4q8Gjj97Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.05f3853e.0_1590082368403_0.033948349653482035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5fe61f4e.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.5fe61f4e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.c67667e8e.0","@material/mwc-base":"0.16.0-canary.5fe61f4e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"7b3ddcc96480928cfbc9538fcd5a840b5ba5205f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.5fe61f4e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nFyf5nVVQrbQlKefA0d6BhFu7eK5x6rCDK5KLVGkwWqrjFGs3eqsfBbVH4F4ZCO7iv/Dv4rXBV/Vh2QIiN5npA==","shasum":"410ece199264c2e376a6eb2109a404b72cbc002d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.5fe61f4e.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwlsCRA9TVsSAnZWagAA9ucP/20PJZ5b5KNQPxLHSAbw\nLuTN3rjuqKENaBjgdxpHECZXiKPpMEGgkFuMkfH//HayqQTwNPptWQTuo3JB\nBUUGkVVVL7tir6rMvHA5UA5+V4siFPsuVP4fz5B78weuyVfhhN1hS0XjzmwG\n6m36CkRySboJC9lbzqoaUoQ47p7vKI5tV+rgKghcFUc40HnDHkLf8FoO/+Ki\n/OKBxOnrO8/l2+PrHK/nAX1sv9b34XuUOHh1jmJWChkkM2RRuhywQT4rl2Y8\nLpz8M1EcNVLbY6yS3wdDs54NNp1IISPeEeOXGsz81BLbqXJmL4Uet4jlPfnI\niLLzkwn9fwe+4JrlrcioOOXT0fxTwLcE4sK16nWNtWRr4V5w1ofgT+EWYIBO\nHec+jO2pTueQOAK2LXYCOO0r11RXIZeMoCnjOYcHHNzl/qU9qv4OzFcIpv+p\nOz7aYZ/kr3VK6wv/KOD+QdbWZ0jbfHnMnuF0yC4fyQ0nED8oi5cedlHYd0Rh\nl3YAagE7w24pNGcCft65iLj7hJ4PwpiNIOHeU5VbTOlyXts+VewE4XNf6oiU\nu9XNgS/I6BwiFDMLDg5OWMuEVx6FxL3TtZ8dm6b0E0mbCP0HfWPlzUtnFfGN\nt6qx1xsPwD9T09wn3ou+EfMof+ABjpTnVEb7Zms21QoD/eWOg/9YSa7WrQl1\nnhDs\r\n=hPqE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDeUp0wc6H3AZio+s5aY6z8KuxXyYY0cmWhmkFwWWe3FAiEArRkhrDmeLQezVIYUVHGExbKoklrE/8wASCt+iGgX/Yk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.5fe61f4e.0_1590102380319_0.11499789767281232"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.17d33745.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.17d33745.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.c113fc942.0","@material/mwc-base":"0.16.0-canary.17d33745.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"b97ea4369af06c50f10fd7a5fedf708bbbc380cf","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.17d33745.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kJypoWhH3fNtGDePk4QEbWSolUlVM1a0Afd3obGB0bd/gMESxStAHGIvpZ/qFbZ21zVvtoQhUkYxV8EFYdf32w==","shasum":"a6f85453f93c7b5cd37d7c65b7bc29943c00cd4b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.17d33745.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUAgCRA9TVsSAnZWagAA4B8QAJdzInBOfqaHrs2qpdXK\nGC0YiQNJgKMRilOLJy5vgZ1A0AWsHFUDTK9R6/9nLHpRwq+rWSizYqSncSON\nd37NkSnmGkZyugu13Bx3TOGvhhkbzYyLOKL2ZlMwgJowcqv7Kz1rX/8KzMFj\ngWjab2lZEcZQ/Dgh1Ju9KhE6JlA8ne90kmrx+vy2+0R0cQUjRVSspf1t30x6\nGJtdPlbfCqlOzPu9eJdTyiV0YPBJ3+ABq6qd8oArXTzlyjomucBgHIc6iMiS\nfUErw2szqgbuj1dmB3wLe8OXubJEqlXPB2GLLYzjv9A0XA3K5lkIzrXRNwJg\nbbmroiMzlqLsR77U3k7aJEYgAUl7mljGq7Orv7R51Fx98ZA18iB05AiIeMAr\nTDQQ/+X7lhzSccm6ShFByPTTsoVD4ePcqc5EqPOOIl1nxErfj+h67pRQb58f\n7wzPdkzF2PRe04UxefXfjXHx9RqZyZwZLPFw9zL8HxVNfzrRgweJLFFY+9l5\nN7Jm87e5lezMfAWLO7m1KBG9B/wukBRB63AM0HGrmDQNGQ5Ye9gQivfN4sp3\nK6gVQ9BiaNcmHcZRedpSe0xHI8fp4RYbebl7mV4sYOZqqyqhUpZmBFI8DnKH\n9rpZsOHdH6A8xyyggIM+ARa2VURNGXYOlQKDbi3bNdhCHs/cpTxDRu3AVrOl\nmaP/\r\n=9n3W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0+ay89adoBMTDU3daiBZ6Q2QHf4fZnXj2bE72jAbsOwIhAOHdK/iImHAYng3zDXbHEqqc2T10eSVqm7mzkmp8dblm"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.17d33745.0_1590509600078_0.11327738357518613"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e8b52f5b.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.e8b52f5b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.c113fc942.0","@material/mwc-base":"0.16.0-canary.e8b52f5b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"2877bdfbc0560854bc1aab7aee7ca63f798613ed","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.e8b52f5b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TtjNn76cbn8IS6QNSIBXZVsf1ij6qZXsYSvqdZxuAnTy6HLdF6wIKFQrABc/OtaBd39rRFzyBvEfzfSwmNnc5g==","shasum":"a84d3ef8013edaa35ed526f06c38073a4b9c4f47","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.e8b52f5b.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWL+CRA9TVsSAnZWagAAHxYQAJ/VNfgESvYIkwyXBXGd\npN/i0C21P91W841b471h+/CUCFRV76KbFHAhXgx5sgpVzsLWmO8sfciZq87S\nR2uzpYeCElXU15ShOJAELuyzTdllnLu4aDRBERd1l+eleW8+Q5vPocQAjiLK\n0vWOO8NqPDaGBX2PlctBHKrJjTScTxLx0KgrmWF7tce9w0xLVgGZomDk/WKj\n4GQp77q1KsAUGvij+nkVXFmx34XBVU1EHeVRZzpXtSErFSARMUzcy59/b/sX\ncBPijWZzXpJAXx+uXIZkH45FxREyjra0plrz8Ba8xhRjBTCh5ZurqtbUgVbI\nvFAJr8xAZ3jSnfMA+nqb+8LzcJgJ8rsQoSNeSUpVHNbW7rw+cpH5Go2EdmvH\nndP3QT97j4L1jS0OnfQCB6xM8zhrCIqlR/b9tSmSJAorebDPE6uEDbS1YWez\npUTENlJSuJ2IdbHU5NDeaqQ9nPJGH5YHTE0Qq4o3Ybv3jciZvaLPo0jY7GQS\nRjG4TnX6frgDIzT9cIrf00BiZm/arX29QyDS6OgW/ZzXYXLqPd6LfyOLI9D9\nc6UNvDIHsAS52BObwXj3/XUo/cvLet6COYubYANaI+k6lKpzh3ftDvVjJX25\nQ8b3Zsy1wT70YMhLK8uWu4QFNEV01KjRMpHjRsfUjUnl7aCAML58s+S23lsv\nMcjW\r\n=BH02\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUnZR9KyUQOhL8EcqOqOzrwrkH+F7evT3c4awQk4QZOAIgTP2nqUiGKRvc93OloRxKOWyN8D70ujF2+lF88pJqrhI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.e8b52f5b.0_1590518523508_0.38239536817666453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.09afa0a9.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.09afa0a9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.01de07011.0","@material/mwc-base":"0.16.0-canary.09afa0a9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"924f688ba033093a21706afcd1d5b3dea4527355","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.09afa0a9.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YLrDzZGukQDndCiOCXtz9mEn93J25HOQPjb8x0+xIvKzObUPDi7btvoPfZgXRy4xEJkFEkgrOSBitXrmnGExXQ==","shasum":"61b377df282b3819dbbbe23053113f80afb3376b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.09afa0a9.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezY2ICRA9TVsSAnZWagAA+LgQAIaHZyAMQLzZkqzbchef\nvcGMVdHN6K6rHw88N7mzJyODz++IrlN3N28ThDRgsnEB67aCcMi5Q/CEbH86\n7/+9eLQCtp23tZP9OY/fZ3NXoo0b84P3poKBK/MmS+aSeb3uY2DNI1nBOjze\nVhbzQ1m4oulhO0QGwAV0jkw1klBJNe25ZiSUY00XWBawgloQ0YKFDGWhzqy3\nktX7GcOARS1Oy1XUuBJzu+YyUVLWBIwn1AlWvUwIck/slfzCi5c6rrZyXAvg\n2j4Zh51bnYbJMYW/nJIpdu8KDOtHnYcDn79n8xhIcfmAnyyQSXJvyk/KWMyu\nr738YfklTlaQ+E5icaKErBOATF734XLZmipb0EFjU5T3LvPmE7dlhwNSh3fG\nJtm6jNwT/kKQxYfsEl3TpZi9XO7fPvl73Ltpf50eiR1t4HabO7QBaw1DeKxC\nYlsYyroJw05v86zEiRgT6fHjulEz3Ek2JHrAK64xZhsTEzN8nZEDINN2tJgO\nQHLnwzALTSH+on5AMmqrlhrPcRhdhsrrIzTiFMpay/08HdvMizSjkR2Q6dXw\nFu8tQSecqJ5JRRCKSbgMRg7xBjae8lw4LNpkGL+AkZKHLqI1lUicN7T/1jsL\n9pIcduupem6jYl1uL9bsIxIVQvlzczBoWZQxLkUv0khBEjg8FJ5/5N4hDbfm\nK/V8\r\n=lLQl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhQ7AAtnE9DHw4Ns4Czg24AxwDovOOzVHnrfJUDNMy8gIgU9Eq4d2F/Jx568vSfwKYbo8GIWlyiZ1FcG7cv3dT6UE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.09afa0a9.0_1590529416060_0.5675448218872536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58bc9166.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.58bc9166.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.58bc9166.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"71845a1e43b7378230bcb8e8fec40f195da11c2c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.58bc9166.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dA1xz/OtW7PwC0jFb5Gg6CTk5mXQsgYvFBDC37q6rwJhrUzKaK7ptg/PEcXKUJr0xNVD1pIApH2pYDr9cisCtQ==","shasum":"8574b394de8e09bfc52859b5d3022d31d5b0b889","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.58bc9166.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezbR9CRA9TVsSAnZWagAAPX0P/1rhwmeR2RygqeyXMzOp\n3UcREw81qNmS4gp3qxCGMe1fcx0Y9KSzlxgFk7uLYDLMLyHbBuGuucdxLngu\nLyLKw0oWfyX7gsv27uYKkMO6vzTfWz4yjM0CIMx8ZPre3Nn7Cwz8yMlJdTNQ\nK7Ye0tyHrti1GKi5wRs0QQrY/UNr5LJSAX5/2ISgH5MKU1/9VpXX8pkjfe/C\nRSeDthWAvbpZXD4/pH4NzXQIk/FTKAYVLD10IJdYuZ10yAuvm8uVsAB/tlGB\n0/KkxwfSgrik9Li3dYjOJv5mF0LuDf5RNIyZHvJbdp62uwNbXmAtniDV/p69\n/m2keSS+bEFwmXOeqCSzGQDaVKevqpLZ2cvP3JD3tYp039gtA91sQuL5aXtF\ncYqyvqUWTEvLvdSP1tp15J4h6qbpPNjL2KOYvgQzqkwnMqQmYCmVCWG4UJxm\njBpSBjF8LPaeHTxA6M8btgdrvk6JmW6cC9/7MZ5oUMZ4L+gmaicIWUnP34Lt\nR7j/fi3W4WoqC5Pwh8rL0HGdXX36v5soA54Oi/z0ks96q0R6bLJyIJpOomOk\nDHcvlgeGKiNttqO5lHMvKS5s76ru07l7ZoRd/2kylwIphumeKpQstWACL927\n8YPpsdmb64n/pX2U5wHtsK/eElYBWXtY85RvlpCZLRsddTRr4MBLA32CXnd1\nYw0p\r\n=+Xmh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDkuThw6voKqd6AiXeGNY0VmKtUxOW/n0lu7kgccCnAKAiEA2RgNO5N+wZaTP5HtNiM8ILXAtu4m3cJPrfkVdNy70wA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.58bc9166.0_1590539388722_0.06410995007698816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.43bde144.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.43bde144.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.43bde144.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"eb504ac1efc09a16041fabd1f3fbe62a49717c77","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.43bde144.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-pe7/LBWeGYBWJ2EFYMQpB/Ee0m1aclnaYRMnr3du6LaZ3eFSO5ACpRl22ATkyO24Opqa4pPhhStzdaBlBlKASg==","shasum":"76785675cd0178db22917488bde12874aabfc3d3","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.43bde144.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrFgCRA9TVsSAnZWagAAU/0P/3+jHDymX9pDcerzDSdf\nspw5017AAlvrTetXZSlvbcV5wroM6CZE6vrng0jn6OHnzfilhHNfR+f1Gvkg\nTUXvKSJFiNgryELzf72n8SD/1kZbviaZ00WMUi9M/Af2IFdySJcnKhkPaqi1\npcNwf0izJjgpZ1jkLp3KU7DnEkbPLNK4w44HEUwrTEq99OOTcE/188zvJgD/\nXs4B+M4PehLPEgXS4IXlcQpY9F7e8Iz7Rs5I0QPidEXhlvQJ9TeVZVbu56Cm\nTpmFR7Dq/Ajb9ky5MCe0rJrZa897+GNNq5Qn8emS/+1iakPHymsfNHaoYvf2\nkvIvtE8dJpp/UTSd6zs5IMUPIe/texgSn0cq77T/hNXAjxxKYdoai1S1gJD8\nsWh2Td//EyjNG8bMwRdiizs3jNtSp4Rj/PmTsaBS1igdSkrhnrKka0/UdNLF\nFtsKdSz9Q6DyHHcVFwYwRkIeh4XGf98n2Fn2HwXrO3UELpzbbtX9JV6G3Ypf\nYZpiYLDoQx7QyHzdWqYanIQIMsyW9uYLMPt7s7cy+UJjmlqFJLaZPUX3oScb\nQ1S38ytO2eAZCAArFkjVb8Ml0EG4L4yoq6huGvA2plJZm7qS4eFARRCeVt4S\nvATTgmSOk+NExPO9Ev/BDvQDRPkSc/PR4/f4+1vWoO72uC+8mLohJI4kaa4m\nVi/U\r\n=sfJo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHypTaRyY1gs6jyF6Nn9wYQuzS7s6hYZx0CA3gc3CAXMAiBzYAmf2qNHP/PUjku6YQ02w66pJspqxaRVIwmde9mrbA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.43bde144.0_1590604128162_0.4575083143270131"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51067bbc.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.51067bbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.51067bbc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"5dc99bc495fa061e0960f717c69cf33620115937","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.51067bbc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-jMCCxSDBA41q6i6eFDzA1YHQVezhcq8sL9c+ZGfRTFkm9EoaXgMPwbFCAakERlCzBQIJiJRslrE5xM+2QeepPA==","shasum":"99865546790178ab89b871c03022f32a40733fbc","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.51067bbc.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsdlCRA9TVsSAnZWagAAOboP/AzTICRbMRmdZZw9Ikfw\nmBrbLpR+IqU5WruLCqP+Xd7X1HcN+EtFcmDOj5yzujDr+6ZJ1Q41KHvZX35y\nS2cvXz1miXlhd9Eo9wnx460dj9D9KuzRnPPvT7Lhd9wrScwGz5Ese/8k2tbb\n+5cPezbc1GwPqExGop3Op0OLNg/QJIPB6OmPYtLtq+ZMHwgY2OJOEwDWBc5h\n5OWyPpwNqOic4SbfN+B/npSh77msjRi8OXMzYovQsXFM0UR4Vkr3BHpXCxIl\nPLSrWvriP9Tflf+WFUwER/ADylErQ9lu0DufbSTFVbKduVjJCXw9osceCe8p\niRb8Zdun2ZGN42jl7jjpGO+CsUatiPPtv9n+fOBB6p/8v+rA01iFdq4qwPh4\nkXMsjaO/cslLBIQL3rx89U5UPkibCI92fYEx15dOWJueMQdru7UCVOR1PLcc\n/qKMMi8ufhmAodk9wYOPvDR3TBNlX9zUhjbM0AET/umibYMWVj1e+x3fJYhJ\nlGBjiLQXCn751hAm1qd7T/JnLWPnnWetX0N+VqWQc48uVzbUUSDSJWuhTGdw\nxDAuufD7QiQ20F5z5PVE9Xh8v5Hp/Yf7nrzhe700PuLN+xew1wlQxfIsWrhu\nh1uoNpCINOOp1dB9ArryV+Csg2TqUVGlgTuoq4mHjMbgZn3i1o5UmWxe+yfP\nHJFj\r\n=doEV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6ZpySRYrEtFX7smTXFiymd2otELtiTkIv+kDKG6TA+QIhAIoXakcgmfPr7YYudVR8cK4PugSn36PoDmj/dhMYJHQk"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.51067bbc.0_1590609765272_0.589600902424199"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.92751ffa.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.92751ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.92751ffa.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"534233b7f60f5860c6a4bd35799b98a3c5d277b1","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.92751ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vcyt7Io1TFxeEi+XFQmUN3vsJjun8AIrq8JzgBShmkGJ2ISMyU9Wa5qStozahOGb/kjyRMqBfUcinfVJhwIrMA==","shasum":"6dfce8f2fc59c75570916957704c853003029339","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.92751ffa.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt1FCRA9TVsSAnZWagAAyqMP/R8vvIWFasbIB3Wtmfek\ngeT1UP/h/kZ6QYUs1nrPPdx8CEW8zA+SgKWSlOGrJttHwSEj56tjSESrk8pN\nxWiFDOIHufHVbmK8LwenflRi41xsM+gzEpQ/zNrG4LoaiyRMQM4L5MNnH8qv\nV5W3OU2x/2/Odub8SiASVxYK340PJTEBy9/jVYU9cvPal6KTe5V+Fegjyhci\n5AwvKAP2Uj48JpXhWWbdpbT95t5A3QsSoAZwioWQ5Xp23vKX18QcklOAxVS7\n6g+XINvgnDCTQvkEMlSRv/ZSaFMUkgF3NbGvXqSb2qdHBl1zbNOTcGe0zAuH\nKODG6PTTZmELO3NCypvUF5+jCebHFR758v4qm1hnoDvRNivWQ6vs6qR3eZkM\nXtfzonAfrF0H7nfg7/CdfaHsTUER66ObpIeavZe6VQppjrnC34HLwGL1Aocf\nROKqzVNU7rE47P8cRrN4JKdtd9mF7y+Jd0lkMtEiHDItlKr1SsIhoko0zMBf\n2+J4NQlXt8ul+5mU7DsRIFNgrrkOymr6a/lHsjvtt1RGwKUp7l6umy6irTrm\nrTpEhrpVhYkUIX21AGUE+hOlfQ6F6GKUjLkkO4gU6xuxYIhqcADYDDXogPjn\nmw9BI1XNcfq2gUDAcmE2aqD3WtqqzZUWdVH0OdInLECM4XjfnDS4o45ghxsA\nqwCh\r\n=0eW3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAZmrM5vLnnsdNvLHnsx2Gvaf3BtLD/dBfyvSApqrMW3AiEAh2lZc9T/wtZn2w3zqC6Pa8gGmdiS/0V4Vh+Nq2Qx5Mo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.92751ffa.0_1590615364969_0.04546760144881912"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.aa2b40bb.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.aa2b40bb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.aa2b40bb.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"2da9556d449ea1f3ddfce5e0978fba83f759a1e3","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.aa2b40bb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-I3Rl7Az+DJOkycMXWiKKyOFWEKw+2LBQ0fcq7TBrw5C+fQBhiDXKLotr4QWHslAOTQ2HdnIpDK2NA1SctEcIFQ==","shasum":"01fe9a71a0c9f9e93d950b2142be463af552abb0","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.aa2b40bb.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0A2QCRA9TVsSAnZWagAAnqAP/jk5M1TSp8aWdQ/vXFcQ\nGZ0CI+93isVlIBGoteVfW9yr/+Y2LLLaNK5CLAZtGt6KAtHnQ3XxpHhZnItp\nM+YbP6YgHJwZf33LsroguXkJgh5Wj6e5v7InSUfkmM319SMcTLWS9zNokGW/\na544Pt/ZmlXKK+y20pGx7c1i6gyRP/2f4H/vBMUhq/W08TjCCTbh5hwHUmsl\ncPEgXUMW1jWIlYToJFkcXtWBYNPM+TnX0BX82nBI+g1oL0v4UDF71kRfswpD\ncvYRHTGpWRhlNht6wgavzpkJ5uQlzvEec9Lbf3wW9x126lWsi+P+Ww5yggEM\nZnjI7Ftn+b3+nOclkmRqAlhtpnUYHaFJtZRj9BxJzysfuHtIR+rlVniSwntl\n82E26ez9orxrdMM0Kf46RKe5ryVKAhTMuIhna/++HyNa3q/+NHdnM4lPhttZ\nPQs46Hwj9mEchDVkh8gCiuqoQuBoQI1e/ksb2C8nQ/DQYYvtdQr3Q/C//wXZ\nninlJgv/fXbuqmcgtoJvl/6sv/iCmZOAezWus85ClY1TDIZTLB/QJu0UfzEA\nz5TVcF+XcAgDR3ANTzIABOWfB2lidTP7Q/BcqQyYgiS0d6nb82VVBiGbYPCN\nSige+TKnjjhxz+SYTMlEa+sazL3k4ums3DSlfE+WzkbMnQLVt3GWuL7zh4Fh\nit0s\r\n=oThd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoX73RIgKi9nINFIAGKVlAf2MLhk5U6FDWOaN3NL2IsQIhAODG/xxnPeCSJH2GWBxy3Qpd8TqtBbSPrpoh1sKs4lTT"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.aa2b40bb.0_1590693264224_0.48739659447576367"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1a870a01.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.1a870a01.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.d66d22bf9.0","@material/mwc-base":"0.16.0-canary.1a870a01.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"f9a61196d2e2f42c5bfffe7dbe30411a16b908a1","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.1a870a01.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-iksy5dQfSxQNJGB9IcBqHWC/2OO+7ZGstACkp7jS7FcSxNR8uq51V9I/LdiXmYNVP8//OjUwSjPz3UK9GYwDZQ==","shasum":"e6d52863c22989dabe19e8718befd54af0be112d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.1a870a01.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0CqSCRA9TVsSAnZWagAAKNAP/2hk6o02qbPne1mwI7gL\nq0i2BVtJrkuDa3BNdwOsRrFr0AbzdMTdLBPKosCbrKVVtx5K4VTHW01EX6s1\nbSNixtheLfwQ1k5Ip3nesxbawklAggSo0As6lRCn+aOlMOPqvmIStztLXaWf\nYSoA90QElt+6egnzN6ePtUupYAjTBX6GyppzNPMvmq4BKw5nwW6iJ4kBZeAh\n5qlH37XxBoS9t5547OT/MMgwr0xxgtI73HBl2xMIw4WdicOdHrT6bYP7p8M8\nhfhJte/oLp4D3Kep4rTL35JRbIlWvi/WJthR1K3HSQ0jeO/4nRSRaQKrSH+F\nUyLQSgSERVKtE4uROcckHmzoIJvMwrxDQlZ3Z5mageMSBXCMDazzdtyB6nAL\nUk7wd1HWASGYf7sD2aXX5eoM7FiyFXTuNXZ/H5hXMyBPsJDymYgfgdmcScXb\nmlWQ0Ss9jRf24oq8GNcfTbd8dhl45wycwt2bVu3b9ysKo2EtesZ3SGAuVj/Y\nbeVNCyssXZta2I1ignMb/IHfT96JVYhywmEiU3GHPLsPfMBozIaMb/U87f8p\nmEb5JBXRCenWyoyNOCo2A9ht1pH3B4vZR7HIbKaRbVOunZ7NfWMzOlTvIICo\nLLTASaq+BcPWflnvbEmRQ7bFmireXa8UR5wUqTPsAUtacH5+ZkCjNjENUN1u\nbOU9\r\n=Ases\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTGYuH6Xwqrg2ULIZsk/YJVuDb0sKsVgweFJj4R4aKzAIgKwvbyd47anbrbXczYpoV7glEZHB0qCM2N5E3Rs59/qg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.1a870a01.0_1590700690328_0.5343397402204755"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ad57d086.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.ad57d086.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.d66d22bf9.0","@material/mwc-base":"0.16.0-canary.ad57d086.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"718a29a398b0baad30119bd852a5e1bf4d8e8e3c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.ad57d086.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uVAEEXNSCzPjzED2ntpHpmw8ANwncMhgmky9ok/I0Xa46xyIqzpEXIbX1YdVZQNGfsfgJgeKP3i4OfGF+U6KRQ==","shasum":"f84b9d7e4cd572c5ce01026bc10ba1ac4c37e083","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.ad57d086.0.tgz","fileCount":16,"unpackedSize":68569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Z9eCRA9TVsSAnZWagAAVLYQAKFTl+f8Mv3gTRuEkEF/\nqaeQ7Qok6WrGCxMbZ+Rz/Hea4B+hO7G9KzC0ikBVZMhcv1kn7t+BVbTQGKeC\nowsn5E5FrrJvkftTeR6dTouV4qoe6Z8wCK3ZBnHvjPpHylZFJ3BXB4C5ZXMG\nw24EPmbkM68zk/91isq4FU8cyPyvEGLamMoYMxGKPFYnuJfclD0DnCOO9KF+\n5HoFjE+76zoQ5oGQ7xsgENlMMei92OqKkb7auW62Rg8SnWDzNl3o96bLBhlJ\nrfpXQyE7Qkhdl1YI7RZrlwXADrHXlSTEjp4fI4WJ9Zj2zNGBC4qpOFaElyuQ\n0tcuPMEWMqIwqJNoppkgAfuLPg42BdR4FCYJ48H3p5atkSC8D3rKhJK8wc7Z\nUyTb4pS3IT9zvElwTXdXUR+Q8Qbhzq6q2vLO1KX+ysO8Wqaeljb645tl98jR\nbtfB8XQenAsA6fjwJZ5LnUxcuNrP5ot6oiBPbma1E6dKh5WEEKy2wwzoyXNI\n8RWqK3FkfTueTwq0mIlJoIt0kBIz1p+cx1nbjKvcJBVnz9Elodjn6bTINv8/\nOmsVQVQo1bngUtVx4o2t2HA9zPk/TVKbtW3V6F5OwNBm6B+d9Ji0iwDmqV9D\nw9dg/b3yy5MdrNrD5f7Y7Dp7CkDQSnniFOYlUc25Q42KdVVkrqT6fkif1JqQ\nvByA\r\n=OXST\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID1D/9nbn+cNH8UQhsCzGrq+Q1nnj0DOeRkvRGmkwF7lAiEAu5+pl08bE/dJbGD8/Ts5Mrm+crQvFP+IQVgyxsHiy1o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.ad57d086.0_1590796126132_0.9602223194170367"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3bf2b4d5.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.3bf2b4d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.3bf2b4d5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"796a0757a7808c623433691d3c52ef63cda47751","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.3bf2b4d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-QEyixPrYQZdjfUqbeWqj52Oy1wGs0d86l9vuGL6HBKj/dp/XsRn3L5QjbpNqKy0gbqt/6YFJVAjhIWHlQ/jw2A==","shasum":"a5a96414d8155f8ef8e57cd81bd130e75d28dfe3","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.3bf2b4d5.0.tgz","fileCount":16,"unpackedSize":69844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ap8CRA9TVsSAnZWagAACDkQAJScKXmAwCveFtxlhMQ1\nXxd0KK54pgaHcolRh3qzxXR+UZgT5/2esXXdXHHqHBs4SBilmId5w31h0jCI\nhLGnBP4FRg5mjqkc4O9ql1XXapbEz7nJ4z3G+cdpmO2KodeQ484tN2OffzgW\niwTgXsqvECulnxhjamT+QGVU1mkDnJC0rISqcC/YZ2OvEL72mbTHFHWipUW5\n/p/TK4ROZvjLUVZYhmZ5OVmSzzbvgOObTxdbBhDNd1jL9rH3/YR3ZClit9mc\noT7OIjLdVfQP9do3p73fHXt8soUCh9WD380ebO0aoVqMtLCq3BnKK4Ewz6pI\nOp485yqkgyuMXGESL9aC5w4dKH/4ck+01MBBd+wCkMp21rykR1rvZlQqBWaD\nl8m5aaHOWZhNOScv6s/9IRymQTzHqvx7NqSCKNl7FUbadz28Gcf8tULtKAMj\n8o1Nko4+g4LHffeZ2CbXTVM7hKuhC7K4lZlpWnuE1/g6Xqvd6Q+uS5EPjyZ0\nGq+6xcRFeikJTMMGYviuwvaIAWgeCAmGGl+l1UlJ5z05M7HwPsVSW/UBnaIY\nFkdQWdRhxj7W5/EYWHZ5V6HSPJUfvP/s+R06NkchJIHzqjBg7OGSlYtuYOwU\niyPV9LrVELMQEctCjiMMhzeY0nWSYtwCnBPOI8rZQ1kXuMLzwgZr0ly1dp75\nMgfR\r\n=/yg/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHo0CaIMhE2Dcy/8Oh7L1pQg9o7aeeoxLQTJpT3EtfXnAiEA9KFAnZIU/H/7LA64Wp/ly3hOUCMR1R1oRTDb1fx+W8Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.3bf2b4d5.0_1590798971859_0.8509706409622488"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ac05f090.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.ac05f090.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.ac05f090.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"dcf12105ac71a486ee350d7b7fafeee2e7fbba2a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.ac05f090.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5iac214QQiva9OY0fzVXJt0OR74vtvMVPhYhbWqTzdMHyXuSLolsL98+gcPVjQCFPbw0N/tlZ7XmbgVunUg/Ig==","shasum":"6fb2acd2f5c451411643ac450d068a6f5bfa4375","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.ac05f090.0.tgz","fileCount":16,"unpackedSize":69844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0cm0CRA9TVsSAnZWagAAWa0P/A7EYWXaA7ZtE74/HyoW\nwxSXUF+k/IMSxE6M5V0bLdAsAj8vcht+kdYiW1Wj7XFcQx6NTDbYIZROvCxt\nVy6RSEhbN9WFDHI+TCHPcpx8bpPXToto/FZjfP52LrFQq/OAa7rhPQvfLrof\n6K2RR8wzbcaWyMsPyuTsYr7CyAX/vklkY0t5ghKvd5s/eeUTJ0DYY9Cb96tN\nKZ29OI+eo5rEqFLznDBIoSZLEXz9/SgzoEC2po12xnGsHzImfxb0zYGaTe2E\nNFmToHnSKQRS57ciUNSKu+ApkbIILoeE84dBHOrz1e+msd1QWJJbR3W6o30+\n9d9Z9/meDOJM46zLRBdpgbg/c6GZVp8B+iaqAEur+yC8Y/JJ+qz5rg28vkSh\nByOsf/bbfSl6EBwD73QM2Sph/cScEq6T8ZkWjEq/nXaR1qVbN/ImXUXYkfH6\n0+bPtqCUVABVsACiUDDGecARn9LNPiX/u1f/VBdJzZC1CjZy1hPO390IW80u\n0wrIfU2Oid+WkG/z/ZGc4ChKRJ/zK/Tx//UmJNl7NJ+OwapBqzXJExftOmoa\nn84qc//84tSAUX6tJ60+JWxPEUJGfv+lssX7q4k53UAIq24dj+dy02AIzgaA\ntE/Uc9loMjQiWX6JYUSclysDbZX9qhnONgDRdHLOMiZALZ/cPS8RayaqXiDv\nUN9D\r\n=MzI6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKR3cxgeM/S5aFuoeJ91s6gUr1q1wKIskx+8s6zmOswgIgDcQSLkidI6yoXkk/oLV2otx6BcgEaaSYlh+3hiFmsIk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.ac05f090.0_1590806964290_0.23707084903306996"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0ba7b095.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.0ba7b095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.0ba7b095.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"ea87617c8c9beaed33b593554f344296ff2b1702","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.0ba7b095.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-J8UNUE6GHrksZ//HtCHmeWDJeJai9rp4tEpiM+aoKrG9NtU1CUkkxzgkUTPSprE6EavgeiQQ7fHwCORI7kNG0g==","shasum":"edea5a4b0a6d1f34e513f76dbe8da006c44c4bce","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.0ba7b095.0.tgz","fileCount":16,"unpackedSize":69844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ctGCRA9TVsSAnZWagAAyukQAJG+uzHELFqJMB8cyARA\nsoidlLGmvTqHZ4CH4j0Ns7X4qa0iVh/Hda43z2rlrrRwj/rwgfuIX/YZ9xDj\nlS8u3viSP4uiDuDR+yT9qRppbdnWLzWygqV1ZqBk3izHci1P8Lzdkl3++uq4\nQMp+YQHtAp7IfaThHKJphCVFvXjOoujY/6brMyIcF+ZglUhsMOghNAtkj/y3\njGsu/Jl0NzGL/NYsrYrrh9uZf2rfu7REApnhUob4f1uA8GPy+F8sezkDvcS8\nFN/7TNR9Sy/dOLs5WSq9ttSNTeIq9bHAZwozwWvva60MRhgHu7Ii5SjyLfR3\nuut3HlWYWcY3swuLAMx/oaJq04x/zul3KqYR1JjPqNxoHl1EsrDlD+4BqsVp\nNFsI1jQ7O66ky+MS1m3eO5zCtKD5XWQ6SBJW9s6rzEVAAjsm3HLlI5nU9bZ3\nWdgwta6/0cD5wD6jJkkzislvfknQEasUZXLjgFTZu5Y+8r/enbLvYkzX8E/B\nBZhPqq2x/iK4d7jnmC1bAAp6nbok80duyuB2CWOjCCXRKC8ucCRzd/f1XgaI\n6IJhw0cKc6uxenQFgnyFppaheEVSN0yeMr76zmsVvtE31vOEdMUY5uZRD2wP\nfAFvWrdczpcQYru0uGkVrLKu77XUUzoSunXjff4e8wFxDdMPULHR6ftcldLb\n6wge\r\n=+kE1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdrf7eAyPZhcSrprXRE9CdXKqqo4Js9h2z3PlEBpfeLgIgbcx/xzjGXTDkPYvhynFaYCPTeCoioKRuucrjdWUzWMQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.0ba7b095.0_1590807366380_0.9799489324398887"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5eaa9bac.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.5eaa9bac.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.5eaa9bac.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"971c5d20ea684615fa18f3c991d77704a2435384","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.5eaa9bac.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-y7vgAKjGRVJTBpNgjg+T7G4A+QaJMz5KZpP1lPAmL1c6GDSUcdS/7C16fN9+SPEdrdXEbOk9T93Pr5Gh8VTWNw==","shasum":"97d0f661ffc9bd90ef2ec1d3d06fa9067ca819a8","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.5eaa9bac.0.tgz","fileCount":16,"unpackedSize":69844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Y8QCRA9TVsSAnZWagAAEdcQAIwqyySvqJ3SXZa46MU2\n0sDVZTgG2T7hQProXPHinMYiyko45PK6bO5e1Wl8o0GAonIiyDi0w9I0ylzp\nyp6vfsGVZy8wC4eeVSrw3CCEoQ1l6JjQXa1ATyQtDiuDS53m2w5Ymk2Z4H4K\nXprQtbRIKjyFhYF+OYtN8KrIxVuKDSLA50NmRRYW70kCFcFUxnQg8Rt9211Y\ntBpzfCGdHwnbeMKb7Tfyl8bJ95gNONvFTs7PD/X/iidyuAxrlHKqaNhZfjOZ\nWZ7bSSGnzZw8IuhRxXW31DS1aUjgtLm8ZA3VB6JYWDbQFMMdXa702YsbjhzZ\nB4FIA8XqZnoUjXS/VvTsf/1MA+gdTtt7RRvADijQEGGViMHAJShd0QQVo2V4\nLONW5oTbxmS8q/pmwhzezjK8IaD9ty4vEm2di75pPyv6qX8XEN5q31e3/HR3\npcaAPu3RIzujwXxG2c5FU5dEhkHSHCfvYtmZ6t+jgsdXxgR/I4Jqm2m6XZZr\nhNzD+AoRHER5hV5P0qXci9NbWFVxUQin+Vd1FbXr7N/HzYcbBu04xkaQDOLB\n3LWQFfLHHG8zb0Oxr+P4SQEKm1OkMcpJM1TLwkcSN8IjFzUqf2UhOhjeFnVO\nc8rtBK46lVIo/9vTn/1HFXhHw+qPshmWMqUjLY8HipUlbw/90APyVsxeXCez\njeL6\r\n=DybS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBDwoL4ZS5goH1bKjUCf0AoONru4IVlNvwYzzhjqSgCHAiAJnBaNeWv5lby8OQT02mtHvbzxpaN9qgzptcEBrw1JvA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.5eaa9bac.0_1591054095768_0.01797048822161562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5677ac20.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.5677ac20.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.5677ac20.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"371e5022a95234955de71585477022efd63b4645","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.5677ac20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-A82HKUN+DZL3W2Qb3COiKopp3sR/a4se0CnrHpRMVKrfwUtuJCT/AsZeBxb/sBuVOG4hz2S5LukV4PtVg0v2MQ==","shasum":"9732f98129fa30609a705ca5410147989e99795c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.5677ac20.0.tgz","fileCount":16,"unpackedSize":69924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZW2CRA9TVsSAnZWagAAHUcQAKRLnl8vt+7ILbR6On3z\nHPpPDYfolH2k3/ug6fjG+hfRw158CnTm3gdJXlDAxTf/hYEtKYBHaf3xRckr\n2+tpFyG+T88d/MGD4j6hyZ92x4eH73x2ENvRC/fNRVxNxFwetaPIL+ftcoQ7\nsc7AAr0D2XI0VMo65EiIoLiVcXXOK3Zwn7R189ddz/dtDQ/vrc+OVNp33NKN\nMcpI5qrKq7bUsl/mYUxZGWqrwjrGcli7Xvg5EyHZUeu1CwgwGxjVaoehplZR\n0+4nmTRowOO+ihYuCE6nBEmTNHd+y61Lha8L4t52hbyKEmZkJNGCqhSaFs7L\nA3A8xBGjATM+o+MzLfeB8rT/8LNmiO+fppyR5R/YfJtHgACUr+k9rMl9hXmi\nRwMXcAO1Uw8kPdXh0HhmgLw4N8Gu62YGYc/x8nzxpflZ9XHpZxyjG8dbi6bP\nyuce9ytTVxYtTD/capSoVX3tldN1xlX4K5zloe72+FSHmhEFUvJEgmzlg+Wm\n5QRvZgR7d40mfzdUq2rLFOcmGACaoOhrShNj1nO/YnQvwcBVS16onsxFEG7v\nuf/5SZt+vIBdM7GbzY3+Xhjjai+2JdqNmVpWiHZGYsKV8SrPWiVTz8UzfR9G\na301KebUMVJhuGXCpeH+tOsWVgqE+zAUbM0yfIdybapbw3s7t4NoM8akYi1P\n8kxb\r\n=sLUN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyKcl9MgiFTDpu7z01U8KN6rzZbDOtqoNVDgOeIvH9igIgfmOUn3LvR7Fi5GQQBeef3HFpDeNmazny1wuSupINZ28="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.5677ac20.0_1591055797772_0.8726450984924274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.7ac6bff4.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.7ac6bff4.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.7ac6bff4.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"393ff5005fafa04ca276d60639975d8bbe851f70","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.7ac6bff4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-spdJvRE6DnE7I9QR5Bms8JBt559sd42K4oLS5miR2GO8MFGwUwyPRPf0dVBTO+hK3Cyd1MADXSd+kPiPF9T3Ow==","shasum":"66b04635f5d6c22a3b7466cd428412130346fa90","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.7ac6bff4.0.tgz","fileCount":16,"unpackedSize":69924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZoPCRA9TVsSAnZWagAATlgP/1wq+csWU/4REuPV2949\nQwwMEBfh/XRKbPwnr7uZ4y7whbuVBpn5jl74b3922ZESBsX0tQBfV4zgFMoo\nd5M6dSIdmdlKLoGnAarAHRS+Az2Rry041e6PGAX/GCxg9/h7Qm6C+C/cRZYO\n0kwOqcDeya+SLywcaDEg+fP2lZTuzbBehqLsrEJqY7tVVIYG6JVnKGsfVB4P\nQEw3h3YGC7YzjEH5AoAbNRMDgDzHxqms4EvzqftC6iLRnwBXaakjFSXQYBDY\nPk8beQyJ9u9rL17i67/EwzRHm4HKKvIxmuu1tR12gW01GQOQKdQyYGzUZWCn\ngX6wn24fLOR1M+wjzFdEXLRHlmlGP8LuYJYnhuR8qIhBvXrTac9DPuw6tebT\nHBZRDLDZsaL4Fn4HWJExcFRS8KupK9E2mV3w6UEUKNlJh4RfsZDFXAekq1jD\nj/+FuIfVtih9jN/jHS+IB74NSyc8KqxWP7HrcF3MmEdlAGZrmCkpZCwJxwDK\n5NC+oJIz789JD65lDSuAzp3l3g4D2GYOSTekdGg5TrkBz455m9vACDUJFVcr\nkk0/29drG9qdu6tOksACK+wd2xBMmb3y2J2f4+KvLL6R+pjlBQD8cbqQohqL\nhmzaAYMBFCdxJeAZ8Qy+9PubAlKDsykGPSHUYoEU5lJRzlxwKhZFrzm6Maaf\nWkgZ\r\n=6Y18\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDDCPl8oelgliWbi8E5JqV+5aOJqRvf5aRy/j21E5CFQIhAP4yBMipbefxJq7XQ0CpdvQwkJ/TDSkMrN4aHD0tx9zt"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.7ac6bff4.0_1591056910948_0.7989133709558349"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d45622aa.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.d45622aa.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.d45622aa.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"ec53ab9a7c87df6783ef1e555aba6d7de86c46eb","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.d45622aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nQbxW8biMwxIkM/3j0oYEuDZoWmSkx7imHwH671LYDFOqyl/5ry2bkEtwrkusaKefPByUTjpH/38EF7Qd5H2dA==","shasum":"9725ee9a90e36723f94577cb6f912a9f1f5b5e88","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.d45622aa.0.tgz","fileCount":16,"unpackedSize":69924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uSUCRA9TVsSAnZWagAAllQP/2skP5DwhK0tSNF6Gy2E\nxJj8DBk07npXwy3xv43QjjFpKl1YJIkL/ieL6JfgpQSFJ1HFyyxyFVl8hhEg\nwCofDMpkx04839BuHmutXjCaw4yiNxpvm7Pp9A2HY+iDVyBXpyEtqR1g+AG2\nIWeS0fsVy4Uc59B7hwMQGCcjnuUl2DFHERGL4aYuTdVr+9rasvQnXv7rugsr\nw0ut14G67Sxz+0aKUlKXV/TyeZmIoqCA5y7ecrf4jvA/lnx4HSgDVBJpiR2e\ngvLfdc1PTJsiHbNUSIJ+OK/qvWagXcK8ZxD/aOzwD/tseMrQR4SGoZeQninL\nAe7t2nZnWF85W0Qpvt8KGOe/z1QZrYzagEplB5393wRCEFKbhBlm62gLi/X/\n7OTAK4X2Oo8igzgIm+USbsYjJ5laDCUT9ZVWbnzwkkesPfSzGewl4NoIRk9S\ngdz2OSA/P5ljELdrWTZT52FWoUF7Z9x6xwSQpSwrr2YSKsz3I1XZyusukD8V\ndCV5yREtHAM0uTbnWuJDEfIDi3GrpSV5v3mJm+xGuONB35HP9RQssnV7ZWXc\nybfRz8ZgNQdCfNeHoSbWE7ppDN7KiPF7TTQIIO0e55d5/AmcZ75LZyqVdhjE\nSQGofjzxQQDbZE6CeKA3yx5Vv8KV74XYKd7e9mDOGvc4ca7NvM+MTQrCIl6t\nwnHJ\r\n=d6aL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYkvotyJOLGvkdTt3OCl6F8ap/lyD6b5z3FFYaTnMckwIgPkBAY6MPUOmypVWaz8fM/mQTIUH/neRTfUZklh0zbIg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.d45622aa.0_1591141524197_0.19301863953043985"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.dc26c709.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.dc26c709.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.dc26c709.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"58a25b562ae31e6c32c67599f842dc6bd1f86398","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.dc26c709.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kFzCSn5KK1j/+eDcV+qQaFSxj93SjAlZZ8gqSRYARbdmnPr0bLaZNkmHZ2hUYfJfZlnkpupDffbLHuVZzXU7nQ==","shasum":"620bda4671b8e06f228376b877f1dbe5ae192f68","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.dc26c709.0.tgz","fileCount":16,"unpackedSize":69924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qkMCRA9TVsSAnZWagAAaMgP/3UAR/P9I7ww+zgG3MAR\n2dzzYgV9b1ROBfUqgtq5cG7/M+7USgq+dvTxfOfweF09wvqSF0jEJZEasSPd\nybhCiSmC/c3fNHCFV/fO/eQquCBCJK9/dB6C/1w5nf9GprV8pMRM3Qq8SHg0\noH8ch/bagYzM4B5MglfWzjCiCwwwvoUtWfCsDn9zCpOHoABtN2VJntN9l7jp\n3+nZ7nVBJI1foVOYMRn3fBxAbmZw3Ra/XG7ZEXVHg6mY3mezrDmpopB57cq1\nYVbsHm5vUsCkeww/NZEggbbwdytD28nM8A3eaR8ejsyQjJ+M0qB0PDXYrw+x\nP6nDnQEtBkgxG3gObTuJ1TFYjG10aBecNAXFHYxZU0rJquXWWJC0SMnCSqwq\nqAOPyvUrUhoTlBtM/Mm3Iu3usrYnHYjSTxFZfd2S3uyVWDWYQtDAXdiFv8ja\n7FIc3p3ukw5sXIOQiJWpeHWblNEANEaI82bZrPX16oOgy3jqb5MlLD3zhO7H\n8J1XEIWFJhdE02P+4CpCcHyOckUFF980Y1afgR1jPovpQSM+qW7RMv+d+kJu\nkVnrRuAe0t8GEf1k6Oe5vf9ro+xFyq337IE9mbr5OrhOoAxPTz8O0Uyp5fcI\nOm7t2sEuOD8nRl0P9xuXk/vf/dHMYwLJuwX0wafgmCR9WFbfYXnSe2IRHCFj\nT5KG\r\n=U1XM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6GeUsDku16dvhNlC42xlalp9tp/6oL3E12Xvre03+NAiEA6Nyj8vbVVoVuyqBJKISaTHo9ItMk+BYCgc1Jq8TIii0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.dc26c709.0_1591388428473_0.6999620703043785"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9baf6db.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.b9baf6db.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.b9baf6db.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"911d44443a75be4f249c595f2fb8a90e42365c6b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.b9baf6db.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0+dC4kuSCkX77tQAnHWx7S6yxrUi10FULx2KONq7iwTBLwYxWhxENFhPa2odxCJ7P6+RR2y0CD/9jvwKIU67lA==","shasum":"c5952db8686f683e0cb0e71dd41f80cbee6b8709","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.b9baf6db.0.tgz","fileCount":16,"unpackedSize":69924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qlpCRA9TVsSAnZWagAAbDAP/AuLcjtQtQdmivmAcAL0\noEKBnXv41ABmpkX/SKFpZID7jN0GeRVKeylfVLve+X8KQiFUOXmdgGVCZyv/\nEGKjc8FzyTvuKCUhAus4sp/iU+M/PkHIPpCq1SDoqH+z1zQj8eayMBCQqHoa\nC9I99j9ICdHgvObpAPU3zvwhKVSoEwQXHrBhSPIUiQHf+SHg2tZ9gr2zXOcZ\nbzROV/fvyDSc3Dxm1nNHJ5tatjWQGsS+HPoZtxJMiTEKlqrdS4u8Pfq8rsvL\n0Ueopww82732mpbbH+21v4VKFKU0F+KYXHNu03KvxGk6kpPfAjsNi1vwIOEJ\n94COe0WvOOp8e+LKujs7PqqU6037rFfXF78sD1pTINS5Sw87LNr9HQhnOO/q\n4WczFoFNKty+03j/111kdk/rx3bnGhHCkf0DDqtAWNPjwwogPWKQQ8YizRBF\n815peHfgh3QLb01FdM2HeVl21bWGiuIDTLZPhHcGgRcbpFIgY5EGpX9GwP7c\nDfrOVXxoG5gzYlsdap9eWZCVhu6zVr+frsAlYvaZ0WFkzdTRhXsL4b5XYkR6\nSY8Jnj5oWtJj1kJKsTSfNAS89QyCGk/Uho7RFn5IBlWIBanFxdMhAaEPqzYm\nsbhaLNrW37lcZzcuxM3aIwIRAyoSIPkFD+uY1M2uiVj6Ldlu4ENDgNWFOdPz\nX//0\r\n=2NP7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGMX7afmkqqCuBtMGNuFPDStIj6nSLyuE+mhMlRk4b0TAiEAngtdhPWi86KNP96vgUPT80UJ/iVLpQvDJBJB2Jx/xaw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.b9baf6db.0_1591388520862_0.640115657913503"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e0b8c9d0.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.e0b8c9d0.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.e0b8c9d0.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"8067f7c0024a048e98d327efa458b70ed21da6e5","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.e0b8c9d0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-aUrvNBJhSAqn5vr1KJ7QHZZQIiqiwj+v5KhGh+1lwCAlenpSbesFBqWVMm521/ql8X597C8ijs4c82pZN4ZOuw==","shasum":"a461c5e2608e30cd4d1846252732117a0688490a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.e0b8c9d0.0.tgz","fileCount":16,"unpackedSize":69924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2s9tCRA9TVsSAnZWagAAY0MP/3hb2UdP6/NIhJ9T18ZX\nT7BWYThGh4+Sbb5IHkMnwFXYLp+sbWADOKLAehgGkR0YfTpcTV5CNqfiV/uJ\n29KnKWc2WltSaAn/C8W8gXP8aFGYSxkZB5WT3OTGJrU/aXrhf8VcqLyFzkX+\nhbAQQK1QUG9PHqq73JiWthNkO67p7zM4Bzqy2w2BDVO1i/gfwKU8FadqQFHG\nreDgSpj/6FHmpZVQZ2ZjpTZeaAka5223FpeB0nYY1AQrI1msrlD5ndjLC2cY\n6vkdIJx9YVSKtAkZPh2HDRaibL55tIgaYOO1z5OvR7pGROLuZhCnA5M/qjrR\njs41nVoUpPSnT7886iikJ7pIgPT8QMDrEjGnkSjjXdIAc4YFEvRuTL2fNV/c\nyxNd9sIkpyX/mX+e4uenvBZRVAXsjAevSQ5tA0P1izWSuaKml2ZkOS7YLSwj\nDxS7IM7dU14lYBKyUtAzyuvJ3vYD4fbR+eYVIWgvZ5smyN3A2ZFgbI7Asj2o\nsyMM0WKIevKo98oo/8SImLP6aM9+4k9e5CLv3z6MQsEbox8ThVDJp8kw+/Ze\nOCu05B53Ci6TS/SSsy46FvVVYBZ/gTGxB8rIoRoJZUvIy4UeCDd/tj+QXdNh\n3VEuyw2H9XIm01VxJ5F+l20QnsN1HSOK9N5vWZmnkuTlXdvrW/IHnWXm9lqF\nCcOV\r\n=LheU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC3uwIpea++/i+6wqjMLjD0JU4PJYn8juBXIoCWjwc5RAiEAzqfv3ibQf/35+CsXEWOxe2jonoAn29NBp9nkED6EQn8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.e0b8c9d0.0_1591398252408_0.8665955990757295"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51552859.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.51552859.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.51552859.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"be62282108625892e385a5b64edabb5c9949ca75","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.51552859.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-lSHId/CIQ0GerRhwc87hzX44n21YlpK8wRWgYuPL2JXq2t+mc9gqxQ82P0eJ1ufBisnpHd6Dhhxh4H1IpR/wTQ==","shasum":"68a017e2b6288aadd4db34e808e4fcae423bae3f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.51552859.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CRJCRA9TVsSAnZWagAAPqQP/RLj2KeVxJyR1Hk9Sm2B\nhWM4xtf5Fgfb3w4mRdw7+LqOljtTzIBeqY1V3PqfuQJEEC3iSTlXOEL2GFB1\n/Q7ubYT03A63xe/CbFIK/7CCku1TJGKb4Gr5Q+l19BybMkWCMGzFNS9uSarw\n0+eCi2Hxa9aVduVktGs5+xh0Co/H48e88gfU32UlNLBq/viq7yjmKKlwYnvR\nAhQzwI0s9yeVLY1F8Pnk6e8iGDw/IlCpdOINBN0kU4Cp1KC+c+gKQJhZQZvq\nH35MzN0OBeqgWe8X8wXFyp0rSsQQDUZZketuz70W9cIiG9vCjigd/UU1+Wnv\nKI5Ks92TpxwyXkhd8eJG8gKE2FLyuJ/1dY1+1YEyVkgCeMEsTA5nIFoJMLA4\niAB4mzw4erWo/zC97BGeD2+vYnV+nOc5PAHiJDtd6BC/0CBxzZg3EmByfVnX\nB+Ims89JpkiG5RbTiuwrqBBSO25TkQObh/5ESIMxJVbd7pESpYgd5qlANuhB\nmANpw8z/rcwvksyW7+mm/rl1k8rHvjJk0V6So2/rUecGIleYRlaGdnK8sLI2\nn9iHAqPnmiQpDjh5Mtz9WVSXkxq+LKSryay9WA7JnOHUEq2E5HIyStL7JLud\nwShJCt6MWJcgvpGiszvHQz2dqrWQORAoVX723wX3ONwhZvUCppYqmmfXpZjo\nKsdJ\r\n=3dSk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAyGTMsLctgroaooiM7S5nbmJW4tVbRyvkmLsBDLdUJgAiEAx4eahvbT1tFcQNj62xV8+gR+SqSxOOHvFBlUwzfaHko="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.51552859.0_1591747657059_0.5469114187399258"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2e269285.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.2e269285.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.2e269285.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"de64737d606dbb8ab6368d8fa30690e62fa24cb0","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.2e269285.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nbm9MtL1UIA+Rf5PfjzHJpqNbyU+5JHp+s86YY0onT5ZZF9/9a8cizz26Xy4Rbhe4MgdFsUNsjX8n7kowV/wjQ==","shasum":"56b8d6ae752348384c56665d77ebba52eaf168a1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.2e269285.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4DjRCRA9TVsSAnZWagAAm8EP/iEKPloADbrSv8lsyxkd\nm0JlgcWBETLs4sgvxMdBrIZnsyiOR4IGKYZd/IW2g9dJC867KeddHODyoq37\nePT2ByeasyPEWo/mP8dVmkZEfsUIxPxsL/cOO8bPSFe8LSKRqKY8ILYgiWoJ\nv50MEDWkV3/HlzZ/D9Sak4tv+3OSeCF9IcIZpivTlLUp8Ak5/300zv5M9Im9\nbUdTVs8e2oBfLwKebgnmFLZX8JDpmye9/009bOrgvhcsiXYpun7cUcV6EaH9\ny3+C5VjKEMEt8nq4GghFg0pqBR3dCD0c9/j1Wtax7QA0QUe+aHVjlnpIo+3M\nQCsu+kxt7kIpoKqVXvzcujaYcpk0Rffv4sq5ZIJCGb4puCO8jFVQEiNgBIQ9\nJLuZwAoaCNAtjAiFrtDoX6OQNSjH01boKK9miNcwZl4tJmq0pxw2XG1qJQgN\nWSxJqN+tLS2/ySRGePW021dIq1WHN0YUqFMr7NPdOP+L8yyQujVdGRynibwE\n3HoFxHs+85DghoQQMoRmats3YkS6T11WuJK1jMo5/B7TCWdvYmsegxpSD8T8\n6zw6wOVPoyffVMC4luKbGhSZvq9ElAKwdIAtq2ksbQZHc2uxfkxHCnUo5FUT\npQuLJi8VkM4zmg6jMvgYZqV5RfOh0AN2iKlb/dJ9y2n9ulnEVaJaT3UmgEUR\nMOtX\r\n=0XJ8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZx122DY3p258ut1455msE9JIb368BPZktmYoO6rC7TAIgMINs0K7ZoQmKtLNauoIM9e+pt8JR0eO6zRA6bQ01Llk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.2e269285.0_1591752912499_0.7110822763100251"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.be138b01.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.be138b01.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.be138b01.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"cd3bec5fb787616d9ec3c5e011ed8224add04ad2","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.be138b01.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-F2OSWXJKtMifUMHjiDa5xXpA0VCeBWUkMaT4I7d3cX32y1ad1wpHGDYJvEwAmztY1V11a7JGHSlfYRRsHTqhSA==","shasum":"fc4b8ba501487d4cd92d69d8fa01e9ba90223335","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.be138b01.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4UcpCRA9TVsSAnZWagAARiQP/2owMgbpRS43UdtFyb+A\nrQNVUUvO6dCgXcIgzz6GzWUhiWZHhhoPxxs6hd63k9awEjqEjR2W1F0+zmnG\nBwVr+41ourqYW5/MU1t7CeD7hVHwTgwe9wt9CNhV6MSf0jBbnjsFbGv+8STf\nB8fJTIytM6qg7+Se4OiADxd+A2Ow1w2lk6U57ZZZAyhjsbIwm2/q0Vn9FJKK\nki563Ekmkik8LD1ffu4NcF/LPNQdNRP+e2UB8tWcwILzq2fWm4dRkJ7PiKpc\nlImcY17+rCL26WyJUHmUfzEdwrAeRegp/dUND8Z1udxccuSWO9TZLloPmuWN\n+3jTS+m3M0FZ5+gNVmw54DyveTNTnQXNm775xMXMqdnYvx3eyS4hen/lQroV\nDEkW1ET8IKqAxLuZBs9jSlodvzo9UR431gsptET+/LpVp4G+joKfPz0ph3dk\npS/eNGDqLxfLECQr1wuDSGVAa7iiJP3wV8fYoe8JyzXqTxZE4WhtLclonGiI\nKex2MtEK13Ak6Sjk4ws4CUcHC4XnjMIydw1ArQZEsSlmijA4RNgbkPJtYEyW\n67t56UDCUYX1Kj/qspGk6VDmiALrDQTlz3ph1Z8vVNV1PjJVLZr8nrtpMvSI\n0j1nqSq8SIXE2j9YRPYMDdk06t0TMBMsozfAzrj/BPhVM76WwEGDbfD2fHwW\nf7Zz\r\n=KzyT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICFXq3FHnxWp4+LYlFol4owc96sjKzBELK6bUKWhrLYOAiEAufhTI3xZ/uQ26aImcwu+eZBnSO8urlqMkOS9hU373eY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.be138b01.0_1591822120911_0.47450214655863054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.04bccf5a.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.04bccf5a.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.04bccf5a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.04bccf5a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Fr2Zxkkztl0aNngMJR+UYuL+SspaqXhiLju7mR7aG38t9Z6SA0k75WcTkDHHofkjU6mFN4/1CzvZGDfSnBjJFg==","shasum":"991c07bd1f4401732472f1ad4853c81abbe0a777","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.04bccf5a.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6Bj6CRA9TVsSAnZWagAAn4AP+gO2bgcGI9IkVr+3Sv8k\nKez5djANkIWjeHhvlTvkdTAo4AmMc1lgqNJ7kLaZ3IprGc5LZyhcFRiUkzsP\nijDV9ucQr/qRL+IqhmQoF2zzMlujzsh31CjglG2ZjYVqKYxW6rm5yHccIanG\nQ9sVscOc/aH6HFIbao/LLado1/h3HiIW9LC5CigIhuRroONhXcOGTH2Vi4Fd\nWq7MmQ6SsFb8C9pALZZoMCQMhqvCjJz2GQWvcUHUQrI0EzqAhvOPA27syXVV\ncpG2hxq81+zxZCstLd/qFtGbZQ39YWDvb5rsj+1gQj5xaLQgW4NLDAVDC9I3\n4jgnXsi664Ryduet9OEG+m3s1By9Y0i0V5xmhxTrDWjByAmVuA4x/tg/RQht\noPQI3ygX6CLuO4N5+wrI7dHNATsi2tNaj1KrtbY1uPG9MX1luurJlyPUkO//\noqB+3m7COwrEJXPTxicCzhNU5B/uxvDgfvsXa5Nu1j3Iu9lIaubWbVY9Ke9k\nlSxHvK7KJdiG7BhBHenIstlYRyad0id6XTmmL3Dyxc0ORe0IS3RQqv/zLnau\n3PHMwrvGnHo0J1yzdhy6y/4EqdBYvEy0+VG3DHYSG+oZiLJzPuxR8f1aPwt5\nii+Ew4LEs/rjNnR376cOudLdI912G0Nen4oYKodfpQxpeGblvfCYS+zuFtGS\n5277\r\n=e3wL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxGiIcioIQya3czIbqZsqpPHOu5p+2AxBqWlEwyzlStwIhAO3yGw2051Ogt4WSH1bcbpAfldekBTY8pacwcgkNIx7F"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.04bccf5a.0_1592269049941_0.8837609898729073"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b44dea36.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.b44dea36.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.b44dea36.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c3acae783f88caaa2b0db088b82e7b98ef4ecd95","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.b44dea36.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-PTdVSIgVBXLwIV9VoAma0KKfrCLh0cHbRo3Do4z8PfXZJNYh4lIjDB2FjUP8MGFRlTkP2yE3iNr4SBjqXInLTQ==","shasum":"97f605385c4fa0a4de487e6fbcfa7f0820fb3669","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.b44dea36.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TIrCRA9TVsSAnZWagAA+FkP/35l278IzL2MmlizdELI\nHnMGKSNfZIoTqEG0eilwi4jHngShxOgyVjzvYC3iKbxY0FmEJCueqYM9QynR\n5pvINPJbMNDuL9CFSGFKunmHq9KiYPbG8/7sUCMs8xG/TKgvfGi4TFNPwxHY\nsQBORPPHAOr/SpIGBc2n0VOnpF7ZDRXrciZiddQt38quUj3rMrvQHfOXmFkF\nkfp+ZzInW5BCMcDKodF/nqEC0akYv8rRKTGYzfhi6EumZqnwn47wwkGa2Bsq\nx7RmWY70Lz6CEzkO5qVi6JPDbp6DnKX+238NmqMPIJ0hC3vfBUXmOPa4BfGj\n+4cU8DyseUtlzCRwo1mNfZ+/BVv3X+zns+vVU7WrvMgsEAXY9loxgOyfHyq4\nfMi3rgITfnwsEEQc/5fOBgwMlp5mF+gEqXKf2tacI0+klKfra5l60wJJ7v9+\n4kA7iQGHqsplshrS1+03wUytJnaJ/ui8AKAPFDTlmblBdNBIHztv5Pd9hZ7s\nseebbi+s1Io+bkbE2G9FprVkAzGewCoi0oqq9KxOWx2ADQsXUI3yXf53p7Y7\nZEUwL0xmqjNBAaIPvsGr3VWFFdCNq3iXzb2ws1zFDFY+BqOCDsqjHxQG7psB\nOLwh46Fhh8q2W/emSCmH9NpmRB1hdJOuO/sL0F6qFHx/DZ0eTniePzJERood\nszZm\r\n=6RSM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDV1xhuQD0EyePxNPN+og/Mj0h2WyETMlZzgq1LO661ogIgfAwkKIumr7b2WMz9KYBK0OHxG3Gc0UsFFVug9owo3fc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.b44dea36.0_1592341034923_0.07046611171908901"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e2577e87.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.e2577e87.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.e2577e87.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.e2577e87.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-YyDQP2M2YdZvnJSVelB7OVCafQwq9d1+lNZYq2Ga2SIgGhw4dBJKTql2fXNbFr3vEl+Idc63Jo8vMYmCI3gmJw==","shasum":"ffc9f626eb08e1dd1f356f76bda516a4e411d0dd","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.e2577e87.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TS/CRA9TVsSAnZWagAAOn4P/0T63fFNpeE5etAH7RxN\ny/CD9BC8ZaJXgIC3ctuqC1hvKPu61YDW5Z+q3zgBZV/q62Gi/2xm3/b7IY1Q\nwjCbOX70BGf7tHu3e+5xO4pma28C6ATVxDoo3qRIrTx35bN0/wkKG3R97myb\nFDlh2I9K/NourK+ko9HM9eGcfSdPl9lnNjlCpGs6l98ld0qJ7Zvd/VLl8Ju0\n4Jl1sxPEavScrK15lyhE+EaUsQQe54vtqYY6EUAiQG9a1MHvNQ4ppcBUQKg3\nWWs8SEp5soynS35LeSXwXcXPs1EHhV/cPRf6j3ZtpJ7ReEwpD5hiKC/qcYfJ\nHsUJrk35K1HSDg1cQClLpAktgU9imp45bNdhh54sde200FZ9x7oMXG+/N01M\nT7+3kjj37GpTMmLGxAeahrLOcCuB5Sdq4tuenXZ3R16L762ihhts+Dq6nyeB\n4zlfGLG11JGVKdSEUVnzodqUKzxhQsnTWbKEj2Vm84gWEeDotxBDoc5qwdAH\nsdxGdbOV5FdkAxXQU8mHbxOYGIcaJVS3S1E1DZo+S4isqClOXUiwQ4REnq+J\nKmuVMsK+DPwmsYS7BUjx1eIu7/fasvCX0L2dRUkqIMXZEJWn1NoqQRTZ9xse\n7RHTJb5g1ZbxKfLCFR247mT4PeXW5D20ah6ZV/2z1WnVHYtqqXela8VE6z/c\nzg14\r\n=uApi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDOfhsa7JZi5v/ZnMFAZ2VBxKAX05C+i8m4hLYomkhh8AiEAh2SJPT0czzgkHmIrbtGQDZL0+JaEeACF26Nu6Tki9s0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.e2577e87.0_1592341695337_0.7289977615563659"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58b73343.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.58b73343.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.3aa33998e.0","@material/mwc-base":"0.16.0-canary.58b73343.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"gitHead":"ba9eb85b43f514dcacb8e7517e4b8728a3629bef","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.58b73343.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-eOnWUimvsn5KGKe8OaYoHlguObXdhfxeDtt7qhlZ+POOnTgyqPQjYN1APbuCXMdljrVIBBUk/u2vv+UZp0nTUQ==","shasum":"f50538cc695abbf147c20fcefbfce13a1aa4e3ed","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.58b73343.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6ThHCRA9TVsSAnZWagAA0J8P/Rg/bZLuAobGqyZctt8p\nh82sIaA5xlSqpcuTJUAvpF7tISb7ySb/GxupwUiC17hIAmCWpxIUw9sK4BCT\nlpal4vGMRO09vT/w4eN5gAYlWCgb8royS56TtbmHzWZMnubLqndK9/vtNAm+\nRm2XlHt6MlJx1SXq9SvhnD9n+CU+c0pZkmyHoeriAgzpjYbigzy5FgUWxsJE\n5EcxedPaJ4X4LfCzLQGHSHoYCANQvjCkKL8PLgZuAdpSPsxSRs/4u0ucwmRb\nlJJdZXjIR8n0DEtOjEnbctg8d8lew7ZwICApS98MZnW8QWkTE6ojCylzTcWd\nmUX3jcHxPnNPz3yONFkxIsO6TKkGrBfu6yp87IjPoTP3HsAQVmArpdVF0nQT\nOSytl2LNdBOWGRMsTR7n+HqpttRvAMLhPGc2IgAdvCLSgoQ7eURmHIc+E9kF\nuyyC4RXdr7UoZ3g5WNPyKG0pvE22e+mmgTNn6LT+QaKuds08xVjcwcbXj67M\n4wIXf3kW32+GhIIMpuT9bYShiBpYKaYyljrAvvn5oOD/vDWPSmbE4hIYhDSl\nW93ODw0ieRYIAFWdFJIPCXJTsRWXST6fbELmBDS5btlz2eRGheI3OpehgSF7\n4p33+3ymrT+/k5u8uzUz9O0QKi+vVM46dXWL/XLqxbiLAWt7Dy5Zlmra51QF\n13vC\r\n=1t47\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTSeZaNuOfVDjQNE1IwPijjsnoT+wOoRy2ZG16QMXjzAIhAMehKqLryuYTU6olQYrNQr59CYjp8WDdu9LoMuWkFfaE"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.58b73343.0_1592342599411_0.38752683277908306"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f155c058.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.f155c058.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.f155c058.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"bfa2e71d76745185343aad4d0a9a2b6c3b134563","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.f155c058.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-YJrTgy0e6dYHMqtUpcheXhHTPyzBtiMcRShMUb+sVirU8gh9iIi4HGsxxbhWimn5HH2PohSBQQkaWLzL+R+7rQ==","shasum":"40578b224ad4ba7f33b0ec47c2dad228ea94a6e1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.f155c058.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe661hCRA9TVsSAnZWagAAuBQP/2TTVQSgXFN0D3BvpwpR\n+XSARlrhUn88U3Q0YlUt5ryF5Ms6UQDTq58tmv7NYp/zu3h97c7TOtuoP3Rx\nvvm3putCwZkIE6aQsxMeJ6HuR6ZVthfCOKtoaZ44KUOyfOPPYT3JpoBT/6TS\nPaMHIV0TCaklNGmXCmxKBLlJcVBIli1048bVkM2JTM9rK8JHH50bfL0eLknp\ng3QHRET4MwDoGlB04m5ioulzNV1A0lLYjhcK5rpKTL1RdYufl7FnCBGDukMn\nBU3axdcJI+5NcTpIQWkSna1F7xINRrKcEW5WkEwoUKIjTy3YPF6lk2yFWtEJ\nC0ZCiXjYxgEKRsS4cLnjekI/dYhzpRKeBo3CH2zf+DZqh7v7gPObKve2m+YA\n3WtHaLSYGzoOCyXf804hnIjODz/KMZr3bwaPK/OMAtPklkNkt6ZqhyNnXtmt\n8WsA1Z4mcrL4LsLZExLyV3r+FauG2bOmiBqgkd87wJNrLZIxfattQ4iWH99r\nk2ne8Aq4hqwv8nxyM1QffKmV4Nrax2KNAsXe8KZcvVWA9ranC6h1TeTLJ05Z\nJOTnpV89YdmC8ifmmmc2kHLjmsgJ0dfUpEUKRZXWHPp/hksetpa+flT4IdA3\nyaZ+7zR1DmLT89DhFmQnmEoN4Q1v7AUVBnGbb/hFOT0ztkVEGfNA+Pbo8LwO\nwF6V\r\n=xoux\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBm1XRun1IGMJayF8GJD7j41XLZlVw3immua5nCwCtBDAiEAo6M42lxzhaRnjJ8Tju00mhS2uHvzq3DS1UeYWtl4fYI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.f155c058.0_1592503648875_0.14482750558632218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.309779d2.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.309779d2.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.309779d2.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"5227f0923971be3709c93d0a8ec0d85564fb31fb","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.309779d2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-StbZweoM5In6entHwp3MExqexHMg3Za0tBmkdNoRa4EbfJuTL/YtDrJatvKfubfKIdC2sHi1rDdfsrT1XFzrjQ==","shasum":"d097f08b9c996122c9eb595af9f7f409d4412da1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.309779d2.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6/+PCRA9TVsSAnZWagAAmvcP/jbteZ/CTtn4kNlghZIn\n8IqUal8792SChF7aHT4L7KIf8D7IPk/g3l10T6HidKyyiBiFJRcxahBNyLOm\nHQTuMaS02w5DhGCqG01dlS4YxgYu9MWUwdLZzP+GdcZB9ihxofoKXx5gKjQv\nff44TvYSx17sI6/x3711PJ/occNOoHEoYrmG++V4m9qGGuGu0QsXqCYUSYPM\nwPo4ZGNq59a4l3GjYXrVoPUAZO4dtMRgoFt6HwgGx2tUFHQFUw/JPTperHV6\nVIChE8Kitke/lQM4olGcYemy4YPVDMxUyBb4aJj75hK8Pk2clqn3vaSV1ry1\nnss3BukS5w5VTfjzyg52bQ/yHi575Yu04NB3xykmYr/JW/hpMqqzowLoQR33\nAiG/hIFfDSkbnl5GM+rZIqq+Y8apRZOfDGFXLs4esyPV+weGkupeUCz+ddPR\nI+CDOJswqMKvoXWY6GDEE+e+KL80r4jeU2Zg+wIz5Ix1B0Glvhx7xYWor65A\nQn88VOrYqrGH+4fI2/Yr/EOJavsxNUli1VJ1S1VwhtGefGSYN7Hu3KP6X2Pm\nj8T8mdDHaGpB58N1AZlkVMxzfZANZC4wBamSWamwzszfIT54t86RS9WxUEDM\nXF0MjCkK94MW95mezigl30nTLSfnwIYA1ni6Yrk/JVPSltiUjAfYgtGwa7J1\nWYlj\r\n=BM5g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF7G5HxprkrZwhU9WQa3XF9BKocFTfz5804HtSynHqb4AiAxKK+mNJ2QF8u+2Iu0PMpp+gSeLB87QK8LB4ThQi4I5w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.309779d2.0_1592524686661_0.941871410104482"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e7649968.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.e7649968.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.e7649968.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"33e44f7015ad267b659c9bf1d34799ab8d508993","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.e7649968.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-LhIHN9rnRfYfkAzHUKFCMFYL+db/zDkzwHhnwaS6zwwPEs/XdIUYjbU0bxfdLVRi279mC6h/U+INwThwwUhU3w==","shasum":"aa519523ec11bd385c13bb3bc00a31604f0c7d34","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.e7649968.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7TDECRA9TVsSAnZWagAAPdQP/R0rMk0NguTWRn9VS1Pe\npf/35DAVar/ADtCyI/C2icER4ytD+Gwx/7+Yh3O3CH4AFavVtHhzX+QV5qIe\nrCJzjufvC3WQE7xaLSAbekK8VE82Wb9a7yWjIwZxmI3RKIGLtxXyL7CEP1UN\nSUdrUFu64QjaRkxQ4kD8lAfpRpBQaM58NLFTQ8aqVY13HIDIO7Z0swhXqVMs\npkl6FcDGliiw4PfosYljXqFssIo+co8Pa9anD7DwRsCrQsDOz7Zg+JQrYRmT\n2MT+GzDz11fZ7/eNPFvdeEjNQuXuJd/DzpNf7qQvKADuVI6CLo/KUVHW59ts\nhuhEEYcRL8hVz4C3PVwmEDcY/NhgVmTEKWxAfFmANXgoqc56OW53xx+4UkPO\nQuCznEfo4fBSCxRbG7fcbxtTV8wBwYg2J8I9M6nwOmDIKAGSHzwdb2FYo4uM\nHmkvaRr1yAu/bGubsFMjfCnZ351gRM3PmgoMrccul5fL8ubWBGF8PiXsEc/o\nrj1x7IEvDIuuOYD9jGuOa8iRinwzqA/28GpFEMTMSbnfaa8mhZwgf6N4F4PD\nX/0oAcplsbAa021eo9pNEGeRWPDd/TiXIFDazRPjTxZ58jTAo2zFWMo8ERPU\nnJ3+FVxuA7XYH/oj6lUW6cOXYY2j+WcoPs3MTS81TFoqSUvubQ5/IMVp+rLT\n4aHs\r\n=Fljt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIApQ53oI1hDKnTMwD3rvb1QCUL1icX99qQl8WiLYlPInAiEApmR37tx5AFR1yb04spaI9x4+WTa+zHhErOD6Thshk3E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.e7649968.0_1592602819971_0.7222168529328976"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8e21c78b.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.8e21c78b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.8e21c78b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"87567a000d0fe9c1fe6f2b37030908bdda7f3290","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.8e21c78b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-t+BrqnZpdqDK2b8IDzLvbhgT7ZTaW4CZbJXpoZMQ8saocMAnGMozlLKFp5wtgtx0pTX0691E+EaCxLKPmwvhxQ==","shasum":"fdeec6e01457d4f54e706648f3a9065fd2580225","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.8e21c78b.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8InfCRA9TVsSAnZWagAAJQ8P/RvKP5lwMoFid2F8/+C8\n9A1SIiAZy9KD3HpkzDy/NM2lHmUlUYUQ1peq6WcBJ7OU2mfBOASKMFJMHKUt\nqfCbqx1PBWwQvkmfD1cZfab2yMOr4sLLPJ8WjNsXINNbAY0biSYdp6NZUlcX\nX0jHVa6stMA3KD2u7tF/BxVRDW03IjmrZ2JQtkRq4WqhjHjXVHS0aGB3LTrP\nSPQBEhrU5Ly+51WYo8CRUJiTVqzqDP1GqxS/ah4/tS1ERQ3dzmN+aW4F1f/D\nH9fAFSdNP4EXw3ySQGRFhjnUj5WUpVcz//6mVgodk6pE8ux7vsnnO9H1fSsJ\n7dHIkkGItSVKmQeoDVunVpFvT1R2by87Ai1ncg4x4CrnUc/IlRUWKNUSuyjW\nSL9dZsQ7nSAfyfQG6QntKvZtAiOIgb69+x7JUYavooyyGLpRfPoAspfy3ALC\nhrcJYDLZ/V4pmoMWryxPDOwCRaZa9xyeIrxNPwTIN5MSvVWrA80pHOT8X6zo\n9qVktcPRXpmu3fjjeUsR4vhtv+kZuZUebu3JvAfyUNNYWx8HrXYMAgWYXovj\nFnRBs9aiwcxxPsR++pY1ukEN0PLNgvAo0Am28XgothxoFgPNLwr0WdSEUlG5\nb9XcCdi9Ci4ADRRMB6e5vOUGPYaXbrpQGE9YZD2LSP3aY2iAhTYGUqvjun8s\nZ2Ib\r\n=/8n+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbzo5MhiWRoWReJGqGZIyTi4a4K5BPm+qJsZyHOWNqfgIgeGVBMY+vYq7lFMUkFtIXcOqw2Okc3wNJZaFrZKmqaoU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.8e21c78b.0_1592822239343_0.8448135647891382"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6db76faf.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.6db76faf.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.6db76faf.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"6e23f797a12e3585f2e2fc7bf0311266b8908e40","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.6db76faf.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-6fYL1dTSsueRS/qmKPI2RxJPT92SD6kOqz7BDfkd36OMorwFc9efvGvm0Ua2HkxkkPA+rZOQ+b/8hwXpYgvvLg==","shasum":"c39d4a2bba8f237f578d4b8a633b4206167db605","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.6db76faf.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R6xCRA9TVsSAnZWagAAFccP/0ISRz6zpOvcBjqqjco3\nTbPV0BO2Pjdp98Sgh9t3hf4MaKqtmc/TsXHONCblU2mG1zTegbB6DTj8yms8\n+KHnDCX3fTgw/7SYLgqe54tPbPOcZQX9c+xI3eJ1SMP2xCgBoGYjMBy/QPKr\nfBRM46U6qAFk2uQPBHnlB+GK/GhfnNkF/+O9919a8t3Xje3rbN3zxUaxxpHY\n1tLHTIuVcTvZ/UgaNrV3t8aTHjudNWDFv7IYEVYOnxypUoiumqoP00/PIquj\nbj/eDxVLQJGX2SmtqpUCvwEYuqhgTKLAU1mDYWOtI6LwJWrOk+E/aCOQJbDw\njbNvqjvtTzGwXvLa1ISYG3gdpn9M7OdoqRgfqQuovEwo0SqjOqsyEFpSdKLJ\nF7NjXMA97XkexxaGj8POuCj49F8PyFR6V7xVZUlr7kSS1FIrkOG0X5vQbDiP\nnRIUAQUm6enfHjWgHq+XChlNdBGW8B9O6nUtuFg+cP30Tnix61RsQNMTP4pM\noXBfkypcnvSAgiLvXVX7a+u2RUoEfjOCXz+D2Rda4XoQV6uauLW7K1CX9svB\ncb2BeZbZHOfmn2vyzXcgLIfA/9UdAlDh6zm1wG0uh4LTJLoXhSPECwnz0vCF\nEM0TYt4lkNYd9A6RRRlOCKDHVQP5c+Jm/wlt6Na4KGk+KQoHyEdGRTXRpNbL\nA3yG\r\n=ABIM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGGvNL/texrRfksXtDGkD0Jrh7G7mIze9HSK4hIyNQmKAiBtKFd1/QJNX5Hgj0j+L0tlsHQuP7FRp0GT7Ni7rYB9ew=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.6db76faf.0_1592860336851_0.3319407491659132"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c4dd9684.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.c4dd9684.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.c4dd9684.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"4cd7dd845f6929aeb590a441e62cfb720106f05f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.c4dd9684.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-fTI+G1gyWsR9M16pMtPBVeOJUIsz2nQw1PnjeVC32QxQPVRbjRoXH/ILIHs+0unLeYiUYVruWmeEDy7H+XsxyA==","shasum":"b8a46aea332a58b9a32c51c1f305adb5d0634061","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.c4dd9684.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hxPCRA9TVsSAnZWagAAQtEP/RcGLwjqag3k+YL2IE/X\nR1hDOURd1XKu96ahr7ovodcJc5MMf0COpD0xJwRYt862RjTor1MxSxKjQCjL\nLQxQfh7KT3Xpd4zTlMec6tTep9rxGs+GG9tTTnvm+5G76rz8UMlelQ0WBMZw\newCudDheOZwnOG5pqKfRpo5V4gDPWkVbwyzltl8f+sRDjB8n+AyljP1HX0BR\nJSeYhsaod/1tjhmEzWUmFggbMlF36Ilx3RjT9egoAKnWapTEmkTHU6q2xL7m\npVYg3dJgNGa0q5DejwphzKUVg8YRpgeO/mkDRVUEMw9JgFfZwztiXy2diKsf\nGFzCtomVe8dgK02Mte9M8jLaCGYkh7L+7chIUwEEfwPIZnlgbGrKc5QX6aek\nnPAZqIi6fCxlV0qfYHnAhXzoE8aS3nLJA9XwRuSa9u3WxadQbfonINSrI4+K\nOQvlA32+f7SdkRpOQfUlR9Zj/7gtynvVhBBEEWfnh4i8jmetkiSry7liTgXO\npK7IB36K1tB2qpt7WCtZMq7H7kRn+jhG7ztJvuU+vwqz7boS3DHMNCf2M/IO\nfdIRmMgHdZY+tADDx4iTNIYEtKZgJCZO5sJ1vYkDKxMHfPH+WkFq7dPcUL8L\neVcrTyc4HyBUlK6x0WZaDP4GT7UTqJPPBq4TKWi81JIKNwehfOVn6dkkYNHC\nDDmp\r\n=CWYO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZ2DDJkXDVlsr1diBV1Gsm7UjtrX8jj0l4RYQ276AE5QIhAI/TuUfEdmExeJpn46S9HAJyl2AfJUw/Y78L+b9Ofx3/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.c4dd9684.0_1592925263315_0.8903240875855312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b3e53981.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.b3e53981.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.15e81fe98.0","@material/mwc-base":"0.16.0-canary.b3e53981.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"gitHead":"8d83f2faa9e72fded29e88f843dec080efd318b5","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.b3e53981.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-PElW6y4xkqfRPbl/pRM4hV7BD7zXOcJhQ8MBB6F4AAJb5vFPmGGoI+DTr1/SgEfAh43SGk4r/7t7W/6vwoamMw==","shasum":"c45a0fcf6383df929dec72014abc24a3ba900e83","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.b3e53981.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8qCNCRA9TVsSAnZWagAAxI0P/3VivVw+Wy1Ute5GaIFq\nGh3VltpSImgAamWyLfnt5XTZ4mC7WPbuv0G+NMaGGeb4YPLjOiLz4zrlPrQ6\nBaSgJ/et3HPGSrGaHVxBVuPJ5lsufMjHxwtzBsS1ZjYs3XuCLYRHfy6ZXD0K\npQX00PyPvpY8ZamzovKJk1geXsoaeJju1CPT9UJuOunOc+zdlbCB0v5ZI4A1\nx45uPX3PZHCQfSVuRdeHDeysvAcTLE8iXn5vNb7umuNFQPkSphv8bzSeRYLB\nQV72FgbQim1ZuCVFjJWRfcnicj8KG/LGS7NMub7NGDzH92odrNTwAVlHtULS\nOkDWRsNFajA6nxRZdAbLGH4Nlmjk1kGHDks5TVHaEQo0/nTY6bUkxkkfpHnq\nrgUpGfr41UBP6hXLTEE7E/SPbiLDUv14MJ06XnZNvPrhIxbRHeksAzY5doXY\nAJGsQS5lFOnbZhOfa9QEF3CF79g2sKRN5qQbvlpUNUEKYPIZgbisDjxPanve\nRPa7KYwb293Y18IGJwmrDrJjZTNxaQeORxKG6qrcBYIL8GNlHMAjlusSOKcu\nng3gWw31+wqtuBxF4CUCuYHQZbbCjHCylOWPA+U6QvblEhqeOL0eI4Lw4+Yo\ncHSceVPGwjknsvWlpsQg1bKzOloVn6f37cDlQ42d6tbiu9QFIuoOlWP1DOMu\n3kf6\r\n=tLPB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTNV/P8rlbG0Uz6QqSns9Ms7KM012OgWZDKrSOcT1LQQIgCE6wB0fYHHpA0FF7AX7bsP1XomsYzKK75dbjwAtMLx0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.b3e53981.0_1592959117283_0.6168197100588548"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9468f77.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.b9468f77.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.599b8c319.0","@material/mwc-base":"0.16.0-canary.b9468f77.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"89bea892912be98e07d72fec0e142b11d1874487","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.b9468f77.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ZRDvFBf9CVNa6wA+V6Pk3LH2lg3rZJn04xifZ264FoV9PIQEbuKz8IEU7aUokES1cUxXdUd1LR2Ko7Q+DblujA==","shasum":"9296f698618ca95d9f8e6850acf6d85a95bb3861","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.b9468f77.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88t2CRA9TVsSAnZWagAARn4P/i4LKrHkTyxtWkYSG1Xh\neEaZInXYcQ8P9dLYT55T8sv7TUB+QclEt5XFQSHb5yN/u4oUJpbM8/+1FekY\nlHpFv7sYwKhV8dDWjWXVeDQgxtv8LyT5s/B20vQGgYIjD/tB97r8rjfMUS4V\nIvhXwRbVn0V55cBWV9qwQD4zW4SrEHVkeSMdBA8HM7nyP3zN4mykolWMYPZ2\nOVheO4yemOnZI50bAbeCNnFbK1zFdQtxyouZ01VcsOd7dPdwQVvcb1kmO+uf\naPDjNzyuX+JusMJS8GNe8fO1r+mX5bneI2j7FLu3+ulh3ZWoUWrp9W91DqU8\nQCrF8D8Sb3cmwiMhQJy0qJK9LgeDT6j9RmsA7iNhI6N3E7W5kZ0PDR3yrnj5\nEQHwScd9GD6QKEiPyy4j0sSyuCnlNHhFskE3rFoQrfk/NxvTrRE6nFIV1G4j\nmVYn3TxsDE0A+gqKPqSVYBXDSSlZa8O7yR2B6Vpw3v8EOUZffwLnmODQ1Re2\nA3ngLBMNohL8/iHFOmggUNORqSR9t4RJSbISK7H6Ox98OrYECQehmBLygtZ9\nB3SNmY24hbA9l04FznJlpm6PxP33CqXhHe1p771Qcp3BOX0ueugwtb3SOMHw\n6pKPshiN9uwDLB7TAdQeLqAy/ZW1fUbwUA7P3uEd3iBW9IlbcHRzE3SH9C3e\nlHQq\r\n=nAOg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrdRvj8xI0JwTFywvPsIDKb4A8IQTyZ2EknZuIoorkowIhAKRK30tp2bq7Jf6by0vEe25DXsspTlGd1t800yPnJPbc"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.b9468f77.0_1593035637759_0.17604223251174123"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.eb790e49.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.eb790e49.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.599b8c319.0","@material/mwc-base":"0.16.0-canary.eb790e49.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"722b9fe701d60a27c2554032e63a2a7579ed4306","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.eb790e49.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-6JIoSmNDoaYSeLEEzcJVGhccfNljhoCWoThF2Pc9yuROZPUhpoHHorIDqrFOI2TB8953fcVzWYO39CmXV7nDOg==","shasum":"4059fe49954af9c413188508a3f302e33e7dfd85","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.eb790e49.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RSkCRA9TVsSAnZWagAA77AP/39T8TXmyPB104Hh6/I/\nag2WHsakm70TAw8ChT0wMPqpK8l4k+KaWr+nj5NavFe7dnvq73kp5iPZUa82\ntnaSE1O8Z/I3noSqlTW7ijzZPTuTn1DrIxYLK/EF7kJP7ryetENGZhr+AM5T\nRaE+6RsfaFSJMmpCkh0J028t580yDKCmShBmUfK+R4OoV7Uo6RKkAfxVUn5P\nF7N7NvbIbhG37N/GlCApU3LUy0VwBFh0Cdu8Sc+jt7ZVhVgincp4SHwKvrbA\nlUHPfvtFP+MlGY5RKSEJBP0ks2r8dmREpg0JsXNQ/1iTmjRSxFuzRH5VyLMJ\nrDnLi2vlmSjN9uMOHO4jgubFVsAjM/V6Tx19PWrFT6J2V1ISiZVn0B4+YpNa\naj7veaz6qtBF1sTGjlvrwo91gpZpwNlzFk5640xdw9m8OfJalBk9CgSX6eCW\nr94YJfsV8vt4Rha/B2oJ6mykkfSMPx3S1PwyXm0tXo0fcCTYzNImRPRBiOdO\nuTL+F+JmUfDuygMaH7nplKV+Pj2h9erScig03bIMmmdibT1CUNFiuF+a09J1\n52BT5Z7FRXYUQ/vJv6g+XbFtqOKERl/6/YeU1XtZT/FKwgG76O4W9w5GKmeD\nCzEZHj85M6q1eeqHcol08Mc/KzxzeNCnX98MErqxiJ1PSksM0oe9paLUXu1H\nieKm\r\n=ynWz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkoD7JUnxaGMCM8Ld1flyxPjnSL1UAo+aKkuwWXp44/gIgRtPh244OrWSWsS9VdlBWLboFUmP+XUUtXcnB7XLTt/U="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.eb790e49.0_1593119907793_0.2804012195491079"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9aa1a5c5.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.9aa1a5c5.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.38197b443.0","@material/mwc-base":"0.16.0-canary.9aa1a5c5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"04b200e2b2832855ef5eca7e2000672e53739c05","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.9aa1a5c5.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-KukiH3TgjjLE9SFPzq1NtAzagy2F+ZhERmWn+iXp6Opepymgz5ahrOPQLWXJixR4ItPJLkw0Smu5quixpdyU6A==","shasum":"92911d6f571026f137cd6552fd3692154320f5ac","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.9aa1a5c5.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9iquCRA9TVsSAnZWagAAauAP/0/hJpk9mKqWUoNYuK8W\nzOYksIi0VaYj3DGXeHpWf6kLexFdVdbohWeS16erl7K5gNa1doPDb5io1j0o\nNvuuyUCKdyAgK2o3YhcJE/ys4grxIEVdag8PdchRwnlDxYQlXmjML1RgrWmW\n/Eu9EJgg57h2nbiNQfcy8x1GXsDZjV5eV0TSet8z3iZKkg3RqO79C+VINd4w\nHliA8jglFKkruTJ2yEMUW70MKBBsPd/5KoxSUyNF1XTu8Ab/trG+b7gJi3S2\nRNG4WUh25UTzy2+d8AlulWRcgxMqtUmpBNQVXf8VTB8Gb3j/3FKlGEW4CssF\npXRJMUcEYfedGJw+cleS5q8+fM36pCPk8xkOBdo0RDk7f149hWXa4ntTpiu7\nwCj7KLBE8C3X7RFA6Q2bccnKvOx11MHYrienLPE14pA2YGvIA4MvHarnxmqF\ndh45HY5+Aj8wQ4sKFEnPhA3f7SS5x6B20YBOZNwsfrRjb+uXjHguMxukek98\naVeDyxlr33pr6OFzuZMoTDrXhX/GFXjqW410jjlBRYa0ik7CnnLx8P4rJMNp\n1tLublE+0H3zW7jdFvJ8RTebsYwxoCNxraaykQq2uRHaVeI4lHbvKrdlBq8t\n4qCBqoYqqGkDYycsLuHvgu87ynHtUeQrkCepY0Qbb7GCSaoo8N5rmw9OJ+ID\nb6b9\r\n=0KOb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4o26mAnrxrk5zIV+eJk24eSAGMkuBiOU/9kH+nZnR1QIgOIMszIF2V4aKgb9iTWYJCKWT6dPjDKhD+OueJzCkvqE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.9aa1a5c5.0_1593191086280_0.9665387246791461"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d36e9861.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.d36e9861.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.38197b443.0","@material/mwc-base":"0.16.0-canary.d36e9861.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"06dd7e826645eff53f5923422d6024010828a4b8","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.d36e9861.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-eRs8Yt7mDObXtver7rLmQ3bno5zjp9DDO65JWqCAOlqKTx0bFfplA802PlUm7c86MGHClg+GKksrN+H6k0BKYQ==","shasum":"5dcedbab5df9cb485ad16e3a78accc5ce52a1314","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.d36e9861.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jH8CRA9TVsSAnZWagAAnDcQAIngNHnze90DaD/0Z4EP\nwmAWqecJUl3fwUoixvqta9cHmYdUKykfjRoKWinU8S4PZ2PiiykCzrXs8sti\nSxSBUiWaoDLGdC5a6eeAdw/2R9GjzKTnDJycqH2/uLe89yoRIigt8je8PcvG\nf30pV0UsdDrVU6Fe/ryASC3E4rNg+QK8i+VcAmgiMawYH25D2l7L+hH/4rPS\ne/bk4NAygFn5FJHpX/aFSLDmLoWGqvobg12x42EmXRnBQDghF8FYBz76K7av\nzGvNrq0hwh/lup1KnLJR/fCq2X8Vb+1vovCftkrIUX5oT4rXZ3JO7YEDCJef\ngp6NwafnWHVJDtXoxmD3RTBWfGnO3bKMccoieC2vLA/N2Ng0YEqqgYCEnr8Z\ntege/sRCINruAkC5jrhIEmq/Dj27Wz19u36MiTPV1FyGbnVRKn4LlLbooKe5\nPyoupR4OyxfmKPE01mjVv6EcIJHDrWvvPj3yQnHvIYTQ9UgP4YFsoyDJ2gVI\nLrTURUji2+LMoSy8HTOPPmdTShn7irH6StJ2owntEuIPDMCDRXeDLzyRiceM\nGSSqxPSg9pmMrhc/isHn36zrPjQJkLIRHyhWBMNlPszLT/aW2rSGQ13XLbkr\nN9UI8TOt8L06ZlHB48wjn212YmgS4O9Acilh5/asOBrOLkqSVcnEgi67p9pA\nCDLj\r\n=8tDH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFQAGmtWK86vixGM5B9YVQ9LYXjoqdFxon/grtlv3IUSAiAKWN6W8gGDlxG8DGcYHEu/P7+l8wc5bjVYW8awh18MZA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.d36e9861.0_1593192955751_0.2592491488226423"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.155c2f85.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.155c2f85.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.df7154fb3.0","@material/mwc-base":"0.16.0-canary.155c2f85.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"28a52966d069b05ddf3f845738ff3207532f05b7","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.155c2f85.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-W9QLXPMiqoiITiekPCBnsFDrjt2i1qxvj4gWU7+Fdad9Fx3PQWPqwkkime2rlXS3Ewvwaf9oTUPWx4GVjweZcA==","shasum":"b9cbec8f49e0c67724ccd21f99cad0d93fd16905","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.155c2f85.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oShCRA9TVsSAnZWagAAY4AP/2XX24a60vFI33NVRLSY\nc84dRj1m0to/3LXjxX28PMBW8W80H6pwHKP71ZY9Top+IuGjf0UG2ICcrUPr\nXynwIa9I/zjSj1vZ6JzQoDP4FIJw/cOFkXgChSTQGyuBY/KtxSxD0X4S0vUl\nTfutD+GEPn1FdtpyVCHKJCsCeZiDHiThwDxpMnL2ER/lxIXJstw/Lliuvk42\n87rIASbbxieYkFS8QtfKNWXCM+tiL79/hvw2glThF/C6GWPzfkJikjLaXjq6\nwrEsRfcu0xFdVlnZEsHW4FB77Q54/49W5bnN+BPs99XZXmrgfmBrzupjM4fZ\n05E/ykxZPh/ZB/YDnlYSyQpFT2wmr/YeqXLqeK4wtA1qAH6VJmt66GEMWs3Y\nBqHiGwUQCrR92n1jIDMQK+1djiV/1vLoOLGFQVrn2EpEOfwwDUYrpcVLS3yh\nCr+LoGQ0FVDW+gd61ShRyrJfAro28ndVb2ptnTuYe8ZSLiCGEOuGJSGVFl4J\n4v69DLFOQxvmvDZel1E/hLE/wZpoxG4VCu8NxPFsLOw84LJAVqNIbcAjAq+N\n5LZPCyd0tZpjwJmEZW+rRIp9ubUTw0JCoN1UTZy2eg3QXuaeJhoi6SB5j7b4\nZaa9Va1nrzQJJKPP8d2kMS5K0+6QeRMytINPElj2fMp2wwqi3orXZBoKvynr\nVITK\r\n=VUhP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRgqqefE5r5ea81LOZjDqDmIZgiyTf72Q42JlX3D5LOQIgRPmaUvwK3KDyYhIGwUJdJPK8++dQjvMH6RaqwnBownY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.155c2f85.0_1593214112670_0.01972276712983012"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.340c9c40.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.340c9c40.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.df7154fb3.0","@material/mwc-base":"0.16.0-canary.340c9c40.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"b65b8e518436cb4bcd2fd8c59ae2898f2715462e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.340c9c40.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ooZ8M2Lt7tNiwqOeYjia/fNtzZRqIsJ0L9dwVjTFClxhEBRM0y/h902kedlz+Cu427aXPIq3S67H2dCLV0ZTPQ==","shasum":"19ca4a2ed01055af17169713bce68b1f3a481d18","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.340c9c40.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9obNCRA9TVsSAnZWagAANDAQAKHNMiEGyeJ77AHfjxGd\n99JrlYhuThDuMIb+Abm4uqyDIOZZOkdKByvwgSpGP00C9Zob/zA+0d4YIDlD\nLjMMtXs5yrVdTt5U4hvY+gMgEUV5VJfToARd75v2d1Sg0i3fHzCVs/M3o3CO\nSXJMnVHTulEdmTtkz0v2Hy7ZFblHxgf9j0YBE9XDh5RB+kbMuFHPiMJB4FPh\n4FPZPW5PAmWWp5c3Wo8l/WCimGnXRb/cMABiflCJfaZQT9E6jENW3GwEQfV4\n3jWzpqPXBxLvaW3qWEGSm+MktyE+CBQtoCX261EOrK3WMulmGvBp8klwSPib\nN6APIGBy3J4eIdKei1ICbo415X7VZqALGt5EVxNGGqNQScXWVF/RU0uiCbN7\nE/+uFqXdn9EMVp4vMgekZV+Lc7iQTdSXlriNH4H5KCvRzuECWbQ/dXhKJ0dQ\nqVKq+DFJoLwCs6qc+40Rcwbkv+QzRA7h630MNMVbBKx2WTU1Ag61gTqBr1eM\nAmABisfcRYjpaUmUjop7V47SXK/ULbbLGog0ZrTzQOLmOe84S/xFd4WtGhUy\ne/1OXdwcgoknvuzEkIJpc3W88ok9qhOVOTwwwBjzEmzQ29rLWCprpOehs1xH\nI5PduhnGl0fi2kXpIwanOmvXyNgptOXnDiph1qoacGvDWR8rcBcaoWBNrr5t\nPURm\r\n=rgGN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCt0Cv695tybHZqE/Q6oR1osOutLedz1kQVKOXw0lygdwIhANjsD3caQNz3s2Mjq1CPF4UrBSBG5sFzdhk/Wa0jYhH0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.340c9c40.0_1593214668825_0.4320056353095474"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a3384d2d.0":{"name":"@material/mwc-drawer","version":"0.16.0-canary.a3384d2d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.16.0-canary.a3384d2d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"e09d50d940709441416a3ec78b0600a867285980","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.0-canary.a3384d2d.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-WV1jDrT2yx82Di5XVt6daIsYn1nZqA9zl6lWS4Hs9v+jfEujISi50MQMe1x8bS5CpDsoRtGoIPVHBwclvq1y+w==","shasum":"5f4f01a6e7669b11f96e606052ed4f5256fe1fb1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.0-canary.a3384d2d.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6fNCRA9TVsSAnZWagAAoosQAIFfeqD0pAirVZI/J9sI\nMPfAirqeBkBxjpPeetbQDl48/8yBhFgS3yO6IZI0rw6cc/Iy9OwBWrhjjrXk\nlo6V2RNfzcNxrgzM2kFGmRD/D4U9xpY2uXyYA0tsnKvYE6YFRc+Pr8lGec4M\nyzMbzLxM8e6WF8f95JGZVLmB2y0GTOkJXjzxI6DNnKTWHM5kmE0vKzT+1yyh\nLK+YdV++itzpusXq/S2KnyljDGMj3nfU2B8MhXmZz6RgNcNlwNBAF/He3YlK\n1ck72jyAeuqZUc/P7H92JueXZgi9VEMgQdNAwdzeerbl924vlWzuI6xgOmWm\njj9hF5YkBKStNen4IpmUCpOBt2/lAA62t7weESGfubgUkGEObqK0Wj9TZjoC\nIuQNmRvxa5MHRtXH4CIVVKyOcxgeg528kMepaCiKbpDZONfTRf3Tj3D/+/r6\nLL8jcD6kRzz0HUn2fJ9/GWCisctVrFXnoR9xn5iVYS01weraCGzi5wpIO/jt\ne28z3RfMEFU6DPTE0Tj9tl2SdgXpZ428cbNTaZk0IGzi6T73TFxkX+vKWRnP\nlI+QcJNCtpqCpK2I35qxa3nWBlqFEwynBvM9qLek3Xln5BezE8rMjQDoRQIi\nEmKj0SOg9BO2hnisLL7ssnTW53eOA9R0WWyOIrVAqW5K9vw08m5XTDKr8o+T\ncPge\r\n=D5k9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH2qsyboDrot3x92Z2bQzazdm3K9DjjmsSnadS/4z6KoAiEAmGLiZ2MYW/yFMLI4P68rsgLSKhspsIabxp/iMvBSeqM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.0-canary.a3384d2d.0_1593550796885_0.008406329447392391"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.6d056c96.0":{"name":"@material/mwc-drawer","version":"0.17.0-canary.6d056c96.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.17.0-canary.6d056c96.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"a0abcad0ecc43697e7c489d2c4ddebb257cae5e8","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.17.0-canary.6d056c96.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-mZIYfGo/WZEWcO2+IuM+NrHRf3Hlo3JzgVG0b7tYbYqw6QGUgBoCRHFRX9N/HILf5yOOHheAfaGT3jkrnOBJBA==","shasum":"f9012cf85ff076b5480b23a19ff97fa09658f700","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.17.0-canary.6d056c96.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6oCCRA9TVsSAnZWagAAg1wQAIDSsTVfCRfOTLm7zeQ9\nsCB9JVA36vBfp7jrjTp8ARP+k6mjsBc918SdSMewLS8LqMCjFXOJ8LVLsULW\nhfKCgkpXwFh4/6gJj3c0nS6va1q+lCirN14ZAAmgx2/FCG9ZJCvkDui0WDv3\nMFIhStxoLbfuUHQKGkSGto+wyaPRfujCLMqmjaSlYPXxPTThPPjwdjIc1mZs\niMXmMBAeEJkX3KGZ7lUZad4uu9PeEj2dnHhOftTpjGJuiOHKRRJEdirDYgbT\nZn03TvNSlhEVelvEXL2IGcj8k9OVzWB6lQluRqa8beAF22oKtDBPc7iQt0BN\nCpWWnnygYoggTIuXCJGo0xTPruj0NEmf1ybw42X+5NtaP13NEwJbnmbwyVr+\nbVO7MHHZ8UpY2efuTdlwDGyMgpUB1SaDzaHwgqz1H60t93FEmmuZ+lbZ9dlz\nI7hI308IXoQv7drwtLCoMbbLQz0WUKOZyPDH8SEgGE5ai9WbvwYXzEiIA+O8\n9d+FDYI7lLkKgT8bkx6hPwDgr/eCpDoatDgKv6Xq8MLdjbY9WWWjtL9zpz1N\nde49DDHuNOFYVk0PhfjP8AYm0Abv97ARCQxXs5jMNfDhpZ1el/ZBUVXWVKdF\n5EoInS7SJLd+XrYg6bnhnOOPltGbnoh+nTXBQQjj5Lvaxn9257ru2NSY4aV5\nYPVA\r\n=x1tn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOAmHa+aTrUd3zSun/b+To8ecPFlzdpbFuyYCbUAGd5gIhAJzBJOGb5f8JRE5oJonMhVSEye5sSys02MU7JvO8L+1k"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.17.0-canary.6d056c96.0_1593551362239_0.1721731809723277"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.1":{"name":"@material/mwc-drawer","version":"0.16.1","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"^0.16.1","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"3b47995b0b098b9e7dfcc7b735eb23e892cbffcd","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.16.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-BSD0bCf4rZzhauc9EevravZQaRd7njcNeW4lfYIwwrZRi0BoG9eCaW/8B/udEWOx/jO/LTH/8MMC6dYuQkE3Qg==","shasum":"c91ebf4ec15bdadcd24027e71e3c673944230c1d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.16.1.tgz","fileCount":16,"unpackedSize":70516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6s+CRA9TVsSAnZWagAArW8P/3dWEsjx+W3Qrp571IhM\n9ozpH/lT2I0NowgtJOz63zTNgwGD4A+erxpkjwUdqnrIWWv/vro8i6NbQc3H\nEiXN6fsMUOBIKLK2HeaESvmXcnSbmKBlkJc0FlgOmE/wlQdWIhADzc+Fh8wP\nL1At+kV5bZFg2YbgJIlAEtkgxp2V2VMzgXxfzXaCt+whYgexShSNeniSbNFQ\nOUzPzCEsdish0evYU1ahtH4OeUAONGdKiC4MP2Zb5AGPkiU7qeG3pK7Q1QJj\nJ4olfaLv75NmdmXIR94YObgFEGSezXA2UXqWichspt+Y4rL7PSheN74DOSpI\nAHD1VN1YO7nchRBNz9AT6vLRubBxWxwJnDluYiZk6eLv+uk0sKGrTqWyHiVD\nKgKTDOsli0jnHVrp01Ta7/m1Pl8xMBaUHzb6uXM0ol/8qKXX27pB/AZ8gOt2\nPpT6r92T+MZMbFqn+nma8MV/cdh80gadIvDV4GrGTnFkyMnXLly88AqKA2kT\nYl3UIfwrZ3HmgzDAr6twYWxV3PZ93uh51Lrrw8KXFEOHKsx+xSR9zmr3QICi\nY1rHbQIKtxns+BiH3w+ds3CidF0EcjZw+cugcFAdNxVKaNgDTYyo7nEjibeC\nX1GeIYVQ/XdYfzaKx2hqxw/mhR1FcZZeH0cYkLUKzTgveBd1iDKjHmlOk6Bx\nn7xq\r\n=oLZv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGnyztdyJdkoTgsk/ZndTZfq6FxvJIWIZdDTFdluY8ICAiB/cz/nHqB/BpS58DhbmrlbV3CaonJ7kh8bXEB/BcTM0w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.16.1_1593551678300_0.4330165192649038"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.f7e37607.0":{"name":"@material/mwc-drawer","version":"0.17.0-canary.f7e37607.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.17.0-canary.f7e37607.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"898d9ba1603fc85a0dd4f96b0dca134bf20f6b37","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.17.0-canary.f7e37607.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ulx2Wq2YgsD3UktsUxDVB9+ZWR3z8DTrc5NqF0JHSglS7a1LZ42nINuxQLr5SwB1gy4Yv36rrKc26fA2EjLPBQ==","shasum":"79819fdfa1f0ffa5f01e4233c7676845464f93b5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.17.0-canary.f7e37607.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7IQCRA9TVsSAnZWagAA1JkQAJyQ5M1wTN0TK/E6fdhf\nv5sQzZ4Ic77atvpQicswXAPmWxeTRL/PM0BWydQAqwV8+mML/1HNuRJJdlZD\n1FZ31PyxP+a2iZVYO4BN57wXWOgi2BWTdOL5UE7snNdxyj3Sw59Hrs1SQWJe\nYsTn9NTIEx2MmZPBs5Ga2BNHP3Ahw5HSOOthixIUbpvK/IDq0AeAkloI7YQR\nQvULoO1bMYYnw1Fz4RndOr8Blh8FlgGXLev3X8ofpuIw01F8Lt/+KM3tF3Sa\n4Oqo73TIlIRWtFwMmr9+xz1QgKFcUnEAmkHDKEqlGrCTee3pQews1PSmAkWQ\n6IvHeP+8SJGxKvtzakUZHXk8LBW+IaNOGxq+OLCd+DQklMmvK8UZ1o+dQWQR\nc7C9y6rtLXOACog+d88bxqX2vBninHWbe8ue3nmvzzDBGBx1fuBymYAiHstL\nvcQB1jQ+arAyLdlAmgS7zsrXgCqc2Jm3uIwbROWDahcAzODrnkXI1/kwU133\niA89dbStByQLpVZMs2UQ3laieYzm//sOPKwRDPSvOplkXFDtt4ClUd2Qg3S6\nq8No7oO52+PYdNEzpHdYm5NdUlr68B4A7keOMyOcveMIOpWVexWbhQOcqjuT\neeVjtpqLelaxXgnpLdxXEek0bvOZvGmZItC7fcZnZU6p3PIudhXzxUwBberC\nneMf\r\n=AjsK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCB1vbCpXl/arEFzAhl7GlrKOLACozOL6yGHUM+5SHYOwIhAOiGbMsMuxUFUkqE/qSfTbLLCj+TErylzEMeoLqqQC6Y"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.17.0-canary.f7e37607.0_1593553423980_0.9439417303146624"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.0afbfef2.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.0afbfef2.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.610c26c4a.0","@material/mwc-base":"0.18.0-canary.0afbfef2.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"22b3cf02901c0c438f1e4150ce9513d5f45f21d1","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.0afbfef2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-S43B43E/c6TQ2d0zo/nudzGpNoSS35oZXI9BrYu2ss211ztM5qJcVpDQLke4aRLykj4kTMxPUi6e3Pk4OWkEZQ==","shasum":"152ad4418a7c9e719d1e31e511b0e8b502bd690c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.0afbfef2.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OddCRA9TVsSAnZWagAAHaoQAIaN8tJm2p4BrKtI8+Xb\nY773T7zVeWAhutR0YVjy+J4nznQ0Q6dcR/6K3UvowP8Bsr73KBy60CQTJLL0\ne5jC++RDuFEq0mFqUZj/eAiP90A/1q9uorvYyQb6NfpdT12Yr+guIF+1JzL9\nTeXGcdFyR0NXjNLqC3fD/dg0xe8sxS39tpYC7Nz6AIc0IVrd5xRbVvtNpzJd\niKPfkitKJbMOW5160bp5qxH+QFUujNFRmrz4ysu9k+UAnlWSvzGQhg8NxeYZ\nJSGUIFrT1boulVJtJTdLelaQ0u24F6XFFvhvvhfcZt/ZI1UL0PZ+hELj4pQ7\ngm9CiPJPbPdDNGVI1kJ+2ajDWQeLNHT1JW/GCuHV7q02yuLp0Amxi1FJPSVQ\nWru9pVYeF5fbJXOUnpEB3fh6nXBygkVBIfnoJ4Ea0WP+5tC712KjqgseKqaC\nHdTg9hBJSwX2/hJp6Rux0JcpjHxXVUriBjwG1FPZBTbaSorD6Qu/8lq/1ZL6\noK0Z0LSCaqzYB8NP5OLL4kFV0dFbtvjWrVeoUayLtjupaWXSGX/3L7Sg+rhE\nTFzfOjnRD0Fw/q/BIneR6prRrlW9LpSU7/iUa7OKDkZCP6466MGbidon1Vvz\ntsncVa+VdfJz5exmU+LlHSrsimr7/HwgrDL1Bpspzie2NfMk3lqqNY0zsyRp\nXr0o\r\n=zDrm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvq0eFQIWP8nyJd5dsAnFFOqTasZ83rJIdFcrMHuyDpgIgUw7iu4vXzkgT3A3nMHQh7rdQwQBA4PtfqDjEI8mVgCs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.0afbfef2.0_1593632604803_0.10089283942638616"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0":{"name":"@material/mwc-drawer","version":"0.17.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.610c26c4a.0","@material/mwc-base":"^0.17.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"0afbfef219df4add1912c90b8608ac93135d876e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.17.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-itv1izGwtHsRADhbnXzKoVNxe+Dvg6ZmAMKjODPJ6X0YyzpwNqYk12hciWdHaPbhagGFCkIMwpYt5W+hb1/Pcw==","shasum":"ce7d8c6ae068bb884d6248fdc506caec7d2bf0fb","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.17.0.tgz","fileCount":16,"unpackedSize":70516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/Od/CRA9TVsSAnZWagAAdbcQAJ/tE798piS9xfwBZhi5\nueRqlr2pV7l8osQctcWOuxaEqFE1+zcuXaTPB+IC6+5McYa+pG/P5BIdCT+M\nbKJ6ncHmzzaoam0daEp12e9H+JncBrOVUe3Ldbex1FaqXxTnBSK6GsHlwISi\nuzkmYRysURE4JhTp+o/EyyP97WKNEHlNCDg31bpAan1CqUxQ68AO/j6DGtTp\nF4CvUuHnK1195YM1oDzBL63L2VYZ5zW7V1TmgYgcIAY/nVIn2qvxvsxqypDP\ntwBQ9yreWR4s18kvZnhp0MXm7Z5g/9mTts+Tz/qZ9hDE35OH18KQlPX8kxD+\nnA59W5OnnM9NbwBW+4MfdSCRcYABLDNN10gf7lejZ4333Gv5Q4IagMcrHksa\n4nN/pFsVUIK2rJbu0AvQjFtCRn7yvoZH0rAO58kG3o77rL4ElRi0Npx3+xA6\npptLRP2yG1CHbxUGY7luwjCxonCJAGoxMVHGZMcxa5fvQiKrUkF8Cv+AYkdQ\nL2AEVq2VhfMI0lh2GbITD3DEw8BBeN+QtmUWq/43N4LkFBI3XBMXlLv4qkXO\ni+sX5q2LIx9TXaXZRA2Gh69+CgwXjyfh/zHK0TbSvhGfgRjF4MwxKBWe/bIJ\nUJyUntk32GL193tTi/dl4uHPM3SPI2ewTAyy6R1F0h+1mkymYyT5YnRGgWt9\nQZni\r\n=393v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHFNBJjP7a0kGZIgfsdBKfbWJdWabAfBR4EOy9LoRabqAiEAureLJYEgAFX3x44q2GiDvvEP14O0f3IjTdXqHd3ig1o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.17.0_1593632639054_0.8095458652033309"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd970958.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.fd970958.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.fd970958.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"7dc6a8720f1d1adb0ed9ae03d2ee54b539251905","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.fd970958.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-r6ecitCLkcHIwJbq5JMYR01PJN8spfuuuDnDxpVwnlvkSq6p+j6tADdFf8WaZL3xpfRuh6w8EWSNUht7UnFMaw==","shasum":"6c13f6131b53127ee7bb3198fb168bb04dac91d9","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.fd970958.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/R0pCRA9TVsSAnZWagAAVaEP/08wIroL5cCvbqA3tVnX\nIbRM0B7rw9XR2ybn/xzJstmRr4kKk6ZWR4avt+66OXJ3Ko3L76v91C/3bhG3\nYdH7oT0DuLeJD58AMGw+NbdY85PyLB18V2rUpaCO0moPsBKNxXddYpImHd0J\nW6T2WSu7DEu8HRbGOlqgE3Yf91hNIK//yVQssP7UksDIlCRw7kgAO2NXT3lr\nyMJcZNfhLuYxsTTTb9Xy3dO+JVt0C0b4Esx1YZdvRwAcc/ffgTe8Y/pqMWQ9\nMhJcUkxWBShVrsgwMdx+oweA7GA4IJyGEK63Q+wF5BODoCiNIAhYBp7pqC+L\nI2qUlRPg58c/AgfKIgcmU451H8rip8YwF1z8jkLrOjstmJnjRtpLtAXnmx1l\nzkTWxolglF4RyOjAOyeNGsMOfIJKF35jGWnaPtbfnAvGusyfCVx1jtl3smwA\nSu66qkF7196CTsw2UZb4M4LQT212cUcqkHXluMwQdvLkE2AW9S7grTly6XPo\nW+yq0Edh7kePZ/BsS2G0IHXFY3gUIbz4v6YesskME1jmLYCrC5on0v7nmyDw\nimN3GdHa2EGzIHlP+ru70wK4bNp1DFoB9b5Qr4A45iJAqd0+DFLAZF93+YrH\n1QX5dyNMd4bo0ZbcJOQyrSdxuQGVDt1QUs3xTNY0/VsHZAL9lMdnxi75q92K\nOW7m\r\n=kVBC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyfRQFGHgyAwQTwEtwAOdZR1yty+3aGTI4RYVV8k0PNwIgJ5Ay3D29CoNZF/vG7IdrMBeEmNzcs7gFbaC2HWN2/9w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.fd970958.0_1593646376799_0.7987285964309034"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd44be19.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.fd44be19.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.fd44be19.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"19ed8b1c754f72137cfbe305df2c3a6be32c041a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.fd44be19.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-SoSLodEZH0wdgKCz5yrKRT1N4S+CCM7Za4holLfaV0fCoRjSR26ACMZT3GZvCTaiZeABI7TEFBJM/haGd85TIg==","shasum":"798fd79cc279eb8b3989a2ca46a06a29ee9bca3d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.fd44be19.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XUTCRA9TVsSAnZWagAA3nAQAJzgHLAJ8zHBtLyZmMVg\ncmXx6Nvz8bJyH3bS2w8qg0zlHAkUvcyKbVX1jsNv+gVAvjixMnuU4gBY5m3P\nRzgUb0oCrkdP9UwdbwwdkBOvRr+lsThqr9WnYFrFDaky5v8IFecKINYjhW64\n9mBpbyVZSwV34/L4vdaLzMRTwmD5HTDhT23duzrfENtDHW1HsT2LmrD2n5IH\nA8XmLW1uXr8CKgbboEbgxXZBathfjceI49pc8i1IeEg0gOrdSGXLqAhjqPJ/\nOS82CPXyHj9zOOcOlegZ0T0iReZXgOxiIFAUbRJjSSRDZxpWKOuQpi/QhTFc\nwKsqSe3bOIxAXnPket09kiNJjG2h6eoaCk+UO8JoQMVE5fIj3vrDKIFCtdv7\naPDkk9Npe0QRFVxy4oSTkCFMOb9nDnNe9eY4Pmf7k5AqKmfxrD1GpNQ575YL\nHSg/xYEyayEi6NiU+jih9FvVPMMH0TJsq1bhkzK7+i88VoxuSpSg6uK83zhh\nNAp1sbzH0LRnCulYv+JAYXYjMaz+d168cnmCd0hwgiULQECaN3eDme0h3FPt\nd/G7hzq2F/aDEBlU/VRTjpgeCxI9lJBZ3vYg5k5AnNYk3BDDHQomtM3Ud4lZ\nq6fm1ytlBuRnX2skDUcSypFCUSEFI6dIZFMJZtdgjsrot24Dm68S1GhAfLZq\nAI6d\r\n=Kd0f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE+jHG9AbpiSHI/G/DLHifmt5G78z6ShTshaYKTMZ0rGAiBUSjaKZj5u5AapYH6KPAaUOD1AxHMF9Q8CEok4yD721A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.fd44be19.0_1593668883228_0.27775359084073514"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.2":{"name":"@material/mwc-drawer","version":"0.17.2","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"^0.17.2","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ca6fc6de0c0461ca30684d96cbb98b8885c8cc6d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.17.2","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-9FwIj8z+7D+wxL2IAYldzbX0jHFc5Q4ny+jwDFrG+q5h9hKK+VWelvLsFpoz7VwfhHRabvqUJoyTIVPbwXgqkQ==","shasum":"eef58ecdb3096f0f3a090116c4c949483cd6f595","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.17.2.tgz","fileCount":16,"unpackedSize":70516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XdyCRA9TVsSAnZWagAArDEQAIcVFxKMIIJv7nW8k2mw\nq6n0BNr9XjPCyKe9+6hCnnsJTVzDPTBlISqI9f5c2rus0k2bu0o4XWaLm29N\nLrY70HfBcvCVH+8Hgsp2ExR5wAK6Ou4e/rSaXtmRYkh7ekDhYypOenGfMUsD\nqK/7qAD3hZgTFpCX+NZnAsDmylZbvObf2ElqSczAkhNka7FTkjHKwXsds4Ks\nW6GqT18iDIVPesuoViZZ6u46Q8c8TmC6v463o2YcyyInwkWC87j0C++j/0y8\nfJZESPzhbk6qWEtvxZlIgPyVgiJ+KEtI4K8Lub/V3V8KUhtnXzPKhEWtMwTh\nF6TtXQt8uBQpNqwXSoQ5eIGyXASuP7G445itfIFAJZdOjJlGaxnburP3AQxF\nQaQ1hEWLDnlsgbjASA4S/9NbWSzB/NSWpkNigqWL7umAY3guuIl0z60lLKDY\nWSoFUNiXwpqqklwztaETsPsW5zpQq6ALXDOlGyoJ7eH5jhFCpM6GswbJDSAW\nSG7Dp1Us93yT1p4e+a4+THB0BiV5UWX728qsq+ddqmRRBtXFA3PLWb33rqpV\nPvZ6qSdMM68HZToCTI9z/UoGnE2a5S/OVxMBOrSMySUMbO/CBfpHy2K3FbY/\ne0zbkFHDs9scBy15GMprratTUuLE13RW7NX4ICEFHmTEcJ8gp7n/xhPaJRZ0\nvcE1\r\n=RXkn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxhLVW5QjZrprkRV6ianhKlK3LlYtkNrjSDG/VNDE8KQIgY615lBPRybvCmudFp+Sk9tOuhFvOVmkrxJDW31epi3E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.17.2_1593669489864_0.43015374148582786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ca6fc6de.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.ca6fc6de.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.ca6fc6de.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ff7df8fd7df07e908061e32938ae550315d255d5","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.ca6fc6de.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-kTnoZgAyk7CBGANILn0QFkCHS6tFpc4G1foVWhFRP8jzUg/OShTl4OQ5HoLvqYUY+kda9XAfP0Q59MYZ3Cg4og==","shasum":"6baa845581201f8fb5a502d866785107b321e295","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.ca6fc6de.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XefCRA9TVsSAnZWagAAzTUQAIX9qiA9GbIfDYLzXQ58\nZxyszjLTnKlZtf6c/T3+LOIbYp/6RULbHLr53p/AEfRgd+Y11ePVoBUzbkEt\nqjFsGlD4cy0/QJy15ELmKpyxr2MdOULqsnSvCkXnm0yQ9pFxc9kMnE+8fxEr\nKMbJSWXXaCua71HnobtPGMKFHVmP0QCrFajhN0EWO4331KWWR/PC9TPCGABM\nXi49IZLT46KhjPdIA0L1t51JGLDUUJ4N7z/AMaprjn2KwdDepypBRerKT8Om\nAzs0inqt/lUHBpY3DsFzxu2DTkGJvgsqdHZjxcGx7owrZQ3Ms7AHmpIgkEm3\nwJ4oRbiljieL3Ydme1pFsdet/2w6w05Uz0xYeqZWTbqNLeBNnBNO3QUETy2I\n+HACJZsEdeFOHW5ydaiyKZWO2BvNJNLVVXE2DxD9wK4oc7zP8WxWXqQDcapN\nM5eUp6ptZzNNcbOVl0nIzz6y3tJCET5NIhmIJdxfQO3Bawr45meaV0q/0D/0\nwfJHh/gRflKZYOteacXnSCmohS2xxxTtkLbiUsXOfkn7jVV++dl2njEXsFd2\n/RNP+gcc2/+Cq8yEATsX7wkeTSIPhnRRL6Y6/tcn5INN1A8xcSlcMNYFQu9p\nul/T1rwCFdp29Lb2gxu53PkOvVYuww5MgB4Meniq7exFG0qp1u4STvZ+oonH\nyMNi\r\n=zUTw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA77COn5b30jclHIMcZlHz21EwrXsK9dIsNU9sUynvMLAiEAqNhGohR31NIzkn9mTq4YR3LgOdwwu5DQy2RUHJpSxIk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.ca6fc6de.0_1593669535468_0.014512135189935105"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.79f1ec2a.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.79f1ec2a.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.79f1ec2a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"28823685e1aac950044fe1d868c6233ae753ba7c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.79f1ec2a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-7dl9RtxnUfwnkNfYJ+Ng0h2qLwE8Div4377RXd6CcsH3Ee3YwQlHUpsLzK3YZLpv/xyE9o5EjvQBnv2oC4Hx3g==","shasum":"fbda4d0ad5b9417f2d3d920693f1874753c5febb","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.79f1ec2a.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBLGUCRA9TVsSAnZWagAA0hQQAKE1Bjo65j4tW/q9sErF\nM2LkX4dZJkUmot+rYTN0BEg5j8RzVKsnp5DXbLNNkkEjd82CWSXPlbBIttHU\njDK9BAZfvrrJY7B2bny4TaG2L0A9FFA1XjS77yL+HIH0VD7Lqfl0p0DyHPTG\nhdWNHhqGSlfd+/IDYmnYnW8hpMIEqx/GFk2qjTVPtd7WxCBCt5/NJD7BFJiQ\nM/6bGkRXwRHG9nMuSe0eKOQALuLWIt4xGz9SmuN6QQNuE2sFgxP305fvsR7u\nlzUohgAqCsqqBA3qs7DQ7ce8KPdAUz6RBegIgchd5siTMIvUJiEHyvaaHT/i\n+K/iq5hE2pdaafKeRqMJW2yyzynHAKkVjuu9EItaD0ryWWKE4YOjD2Eauu3q\nggg74avx5dzttcFcDJM5jyj8z+VEUijl7G5IMfQHH0bHBOKPE/8imFCQJ2kE\nfmE/bxFtGuY1k77wOQsGwVYWViC9nFLWaVJne1OEl8dpqwjiB1rkss/AKB5/\n+KeIB5paqg7o2Hh0Tm8Ujcj1U+uuN9ILZDUDC+OWwFilY7zMInMQHoXcM6Az\nJvHEi3eAcO852DtbgPO0Iv+f5qC5SIT4kKPtwp0GmFWUWFe0Y2qwqFEOdFGx\nRQSUWt0tzqCDSKw6o/B8UaqM+D4z3HhRMCyNUIPWsLI8XhpE3NpLtKwii+ZP\nhVDa\r\n=EfZw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnqpLZnzTclypoXIai+3bROoAFG5N7+zqeqkkAGRoCywIgUJqVGoU/xsy3MiHSo+It7Y92mQ3I2tRKk8+RJH6oXKA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.79f1ec2a.0_1594143124069_0.8031609438486658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.a7bc45ae.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.a7bc45ae.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.a7bc45ae.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"fe14f2ba9c3850967039fb923e6ca39978290d3b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.a7bc45ae.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-5j0pabUUoVRHGjsHhuuGIdT2agl8sYyGGdTB/84si00IZznTG33u7p7GvOZch3dPDCoI3X0tyC9yWKKLODAxZA==","shasum":"077507567bf6b53be1141bf8b7dd33233408b75c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.a7bc45ae.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1JlCRA9TVsSAnZWagAAtDYP/Ak8gmDJiqIkfT6Qsdtw\nZ/SQ0VTrjQQNpaum5uGNS7Rg7jqfjEhpgUq/KYYWgriIYQQsNtKxtypFqBOR\ndFKdSAomvCFu2OeqGo3pZMbToDhsxVV9t0Ezq3U0vmSyW+EHseE2/utxzTmv\npwLwcdnRvKwPybbIss9VLGzlOYFEu+MpTxTeZd5pl1rzyEsG55q2W3ew5ESf\nrimGtP/N2/427rsCJUFMaS0sTYIr1KN1wc0hLJwvgWN+CVdP5CXaN7Pq0HbH\nvZWHi8YSC4+ZLMZbSbeb2LqLNtm8bda/oLCK33VFrkvvBfhE7pAU+XF4dYtz\nxa4xYWtXUaPZo5rDDHX/8aW0a5xdFaNBS2e/vm+REPDsDMYVxcv/jxLKMCWY\nYEhGu/Mqambkq1jHZsZMOn/Jo8dA9FwJvPDSEDUu7RkwKi3vw0tN6Bet38G4\nl2/badDCdfvC6R+Hn5qs1rKgP5ftDM9C5MGOWwI25k0saM6wfWVSngqNUy1a\n01UMfvbcskzEu8MO1h5mNsjrqg2FJCESK2eQ0tubdxlJsdPGVtuDz67RhBCD\ndkKPUcircIi+cTG+hPRUjE2H+4iBzq+xkXX5uDYA/jW8leC4DwDsJaI7C0Gs\nkKcH80QyAuDVK3AqGDCPOu2fehtcutln4Hc3PapneBZ1U/s6tnTBTzXwa//O\nObKb\r\n=gZlN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFCmlU6yACvrxxJO+0zySpNes3DXpBlROG/78mDWpccuAiAbY/AP28z5UW2iPuRENSRNKN8/uxTIQ1JrpDF4OluEUg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.a7bc45ae.0_1594315364738_0.9992586045725893"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b184bc1c.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.b184bc1c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.b184bc1c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.b184bc1c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-+O575ETmm2M5Swz7nsCUiHgPz7vPijjbFQS3jHdBvVGW1JWbZGIZ0yOSY0EXfeuX35MrxY3MKrtEDRBvpPNPNg==","shasum":"7aedf1230574722d2576daccfcb73eec8b855756","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.b184bc1c.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1SMCRA9TVsSAnZWagAAVtEP/in0ts1zHtSFZ/MoPnMf\nmMNa2EZL3uwM3qnqdsE2FmOOPSRSORwO7nk6Cnfeq/XuMAkR9XIKNAyLZgmm\nWImp5wyoslbnG2qPlwcPbBFGA8+A4oadJ+Cc7q0Gv9/WpHrXUN0fJrJuh4TG\nGV1e/Zksc3WybxYoJlqNju4vbSGeHsxGsXtCzfd5YaEc4d5hUaOqPT9cXoQI\nFsF6b99lVyC/rmr9dDPaTB9kJ7GV8Icpzk8oKi3ekmLWlEDZY/Nu64TF6/7J\n7QdGpe3qxkhxgHMTYUz1ENhtUgrUsRctVQR2yg3bQEBBx4Hm0ZGP+TBh091Z\nsymw1C3u7yX/uBrA/jzq3rsCQvk9VwYhNKaynrz7A7w7kT85upSv0DIWBOAA\nwHtDinm6RAA3xeCQaEUjofEtuZvgEoEme5sthvcJgGjm7Vs5SnN5BPbrM2x5\nkSw66ZSKc3eifDniV1LlMPnvw6MzYr95tmlYMs09JFEfiQwKmYMrmObp9m2j\nsQeSaUKQJ/jwzE8R5mswjLZ8LbvHbpEQedquPpNi4G/cD9wDPXGqgCjau6pY\nVbDotdyzsiHDaxJOL0S8dn6iduIsPykOWrd327Kh91Mm/1hyEgPhPeugtT1L\nf9jEsI9D8wlN1OAQo8l8aYb37O33zVpuiOKjCBxwN1wK2tmjGu5Mbrzn5nzs\nuLbJ\r\n=Wu5F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxqd4u5gDZGb8AZIRw7xUYEVt00Pc20afr8DByK5IB2gIgYlRcC+tO9asOOmB8eseTYYIwQCXOthfxuH/KsAErGIo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.b184bc1c.0_1594315915987_0.9839114079214961"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b39fde62.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.b39fde62.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.b39fde62.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"561ab4c73d80c73f9b95c39655b7057d622fa2ee","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.b39fde62.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Y2v0buiOiFCQ1oMa/1APgmCfiaU+gCEuXNTOrhcSQTtJFrvSMG1xCB7FygGN0T7h2LFKl0Ig7xpHsBWmrKMMvA==","shasum":"086faa7d66d372ed1b9299e71466535f5528f042","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.b39fde62.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1XECRA9TVsSAnZWagAA/GsP/0CLmej1703hegdiGac2\n/gPK3s+U5hOdY/uhqCt+XbDZNm3lwCpaJmF2xWCOloS/+MMhYeFk4CFwvZVw\nBdarxnDgXmbP5d3wCUl/BC62qu2Z1JRHq7OoJ0WaaKuJhAJRGB+h6aeilMOK\nLC14KPU8VwEaRUaT1AAS/0Q8VsVG5q33AkStK3dZnqdoFoajSKuYlaE+NMPQ\nYTeswH7VGBc0QBQPoA95PdijLU6ngf+QvXxPYg8//P4qerP20CHxb8Yazomj\nIveLaFY4d1rEKALch9TEoyOZ/BifekqOZdGtadI9cP9Een+Hyy+/QTzxB2+n\nSGRxvqV21cOuSV08KWlIcewSsr9CSOQcGx4UIo/ynWiHuTve7cHXHS8ncPK3\nbsHcyunpD/rSSs7HAN7Bxxu3fVTuZ3Wmgy3VaQPurnLra2xpRT0+C/OYNGpd\nvyCNPcbWRSUs33n4WkvHIWF7igdbOX63rg8cR1+V4uEfyqHus4JyiOWOdKe5\ngHqLInlvxXFvbm4NxxDUfzis1/oRnny5316TD/OMMoGdpXt3OJCVne6+xH56\n5BYw5uzWLqBLbOk3eQGSA6cVLks9l+8VGg23DIXRDfQLpW8/2Q2rbFSSb2dn\nBtPtJWqg8G/0EX4tKEaJ2bJnYu9tvVstJlz5A/m5RBcvezsdlcYgPTHQocw1\nX7+n\r\n=2xik\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRtdinSQy528TdHsEugszLBm5eJdBogT+OiYF7Bit6dgIhALSnURauOnrJ1v3MBzA2vB20e+KQb0z9GIvBh15qHQVq"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.b39fde62.0_1594316228443_0.7674668263080273"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.dfdd8d6c.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.dfdd8d6c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.dfdd8d6c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.dfdd8d6c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-pXHuIsfjYyuu/GeGJ+Y93LtoYupKSrbqHhhCJqvQ1LiTXvKG74pGPPSh0Jmo8jTjXokLHNcH9dTr0SZcgCXdTg==","shasum":"d5ee70edba213adcd2b7174b03958223a88e30ea","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.dfdd8d6c.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2ERCRA9TVsSAnZWagAAywMP/1wUGbyaybqPb/jdIECt\nKlHVLB8laNBWj7TgWTK4ZpIvsSN5Ds3D/Mht1RyVeD/IDaKSQCz/23okeuI8\nFy97U43wEOQIDA0GSnUaATMyZrZ+d2OJnJdk/3ExRhonjjou0yFZdKfWvulN\njC0P12dxiC9mxNKZC7uLMn01sogT4w5xahEmjM/BTHCcVZz1BtRRbewzb+xN\nExfIabx/r3a8M/YlH3UaCq7XaqgVTHmlPoiJ8BPJfVRIFSQNXZHyQLdiUP/Y\nFIYK5bO+RAqnzbvy1SKF+1hEvEWYWA0e5AclTWTENuMonvbrCsgOn+v5MeH+\nEXcFtRhE6uXsTQ89pszsCx6Rf4tLdFWWCxpmRZGJDJcdPIpM+mALCTtC5mwL\nvz3UBbhIObcEfWn/71QSVneWx4avuGB6uk+rkXhwIU3SfJ+jejPMWxtM4N8k\n8rLZZe7dOkcdW0oZVhzUudo3pbL96Vzv8mZL2vzIqVtdZWxK8tqUWX0jLyoc\n3bi9wIb8bbIn8Sa+ngnWDFe47T4Zn1kkDMdOdU4pUfJ7tawoUdGdT5JX+VZ3\nLsrN7H67uKlDKJ+2JPcCgCYWuugmSN6Zk9nTOqe3vINN+9MxP0slHYqkTAOI\nKGlukS0te3kuDUtMfd0NIpWx1VZnlGoIDmZoV5hnjEn7FVngf11Jy8VB1OEP\ncGkc\r\n=a1hc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICGwrJeKAHOg32J1Zzyqn/5akGufE8uDvAMAuFVuO9/WAiEA20M8qZ0wkGPNXUAXupB4WAlUfata2vwOHjGl32gTCKk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.dfdd8d6c.0_1594319121318_0.7221503921086796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.11cf2694.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.11cf2694.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.11cf2694.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"652e6b8d96cc6adfa62d59e09d264defbb4f259b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.11cf2694.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-SoDiH+3wQRxXT9t1CdeHGc1ojpXI5lylYxPzd7xJvbcLZ9agBBZRRYx0hPxsRpEzASJb3GrvkOzOZbQ4vf/a6Q==","shasum":"391b58b9b1beeb2b78ca94290672f622b63faab3","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.11cf2694.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4FYCRA9TVsSAnZWagAArpYP/AwWWmiqWBnNO+448kbz\nrMEpAblKxr1Chc0UmQRPTW+LRtCuNH9vnqvqZUTevztOHzcytZ4vbbBPmAYD\nb/jOejaUXvSttfF/310JlO42SjA3N0TVUtN7zQOrqtYE56Mue3/TO3Hb2nKT\ntw1LnBigJ7cw/A6T1qejU1QTQa9IbRrhiFRH7x662BGeKROSD4xH/HjODR4Q\neJmEEtEYcAxX60aMtsAMLXHvQwObP7a16gd6FMLxkY5nVoP4lH0Zv/6N3t/4\nvr4BZSAE2+szM8W6am6XyDCyW8Nm73VSluRbRWhboU+xAYq+L/AKfOMoJbwN\n8+zbZpJoy1w2MIRxrE3W9s3OIuyDFJNH5AmdSaFmf/uMPvTRJ81cGsfrl3ix\nIQVZZqlmLsMbMWkUytLDCQ/Z/K4J31lHXoonwWkUFXAfO9LusSbaOfNrz2vb\noc+Uupph1aZR1QueaR25tYywuayrvoRe/ErHZz9EcbZOsoIBRn2UuPcwr8xk\nMfhS0rU92vdipxsZgNbPhEgq1tAafdXpqSVXf7hYezMTBnFXOEle4x2Z1uZ3\n9GSXx1SsgEobnX+9vd6xZTHap29ILYMSsZuJI9pA+vL3MrFw7jLgqBSrQibv\noshbn6X/rSKPPzfh+gxggd8hki/XAip6Zy/TxaQMLKtmE84Zlm+NlhQxQS4H\n5ded\r\n=H+/h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAmjWJ5nVowMm6FBQzDyRQgicljoWCfb96xoqNGUHtLSAiEAopC/OXPcQ/l2yq4khsvCpYtA+9Gk9Br1Ncx2RZGYm5k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.11cf2694.0_1594327384326_0.4263017042718986"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.436d66e9.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.436d66e9.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.436d66e9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"95b44ecddb7a4ad5662751540e79c58656790fa9","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.436d66e9.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-lA2eIfnu4FEsabxwUEJYbUlqgEEQ3qZSfbRpK2asEpb5FsXCWkHFLX3DGBZmwBkTBdqZucU+5kdlRYq7md57Jw==","shasum":"2c3705924ad389245bcfe508f762be6fb42658be","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.436d66e9.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4J3CRA9TVsSAnZWagAAM5AP/1d8m2BZhksLDl6cQvL9\nfZm3iKqaYA5XPmM+xA75sWD40OXvTidlihobPiyzOQ7iKZ+SGYw231W0N9OZ\nvopWukCjBT3nzkFlKijIv5bHZdBZ711GN9b7sYhwriOViFCH9BfxxpWkI/IB\nQ68Yu0aNEgdpJ51dKYPt1HqvSBrq78wcs6Q1pf2ihSmPwSMBNwnhMFJH3Sxv\nYINqP8XzfYoUStk/5zd+l/AJ1VJQjjWft9Mv9VZ8Xw/QNiB1dgSvzGxoYSOW\nIh3cIwBn/vKCIR6xuF3m2MqdkgRA6gtHfG3q0CR7VxiEDJNqu1kwUvjI4eUP\nHvd8lUx535xgTZeOKHnkpMpsYyi8PZrHbDCexgajscRHfjXsVHXROaGNwGmD\nJ9e79rwjwhjTHcBZlA/iM8oYj5qA9iyz52H2QzE11nTb9s9jq9ctg8uwZTBQ\nwABGIM5hypWv/dg5YmF9qL5QQBZQOtUXfPUonCPRbP+mo2xJaFKJEarsWhLf\nnyyb6FJHIKyuwEAz6OHVbocyfFIE/mHFByMkDuwyaTVdfEHriE0g8IJFEWcU\nbu04kla9Gqp2Q7ACQnY1EpMWKlgQzJTY8dNc2K52wxAXLb4gv6SEWm+YM8eY\nP/qtCJEKt+RJHPThxiYxExcatm8U9xYdt03R7O4xN1T4P+FvRfl3uOthAQkA\nUYGn\r\n=EjAp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrf5Wqg2H0RSMlPMeMEWnoV/PpJOoVe4ZVePAtfUS0fAIhAJD9S0wvwKFszheI6C3BOc35KtqXe1cpyvlys6sS0JoO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.436d66e9.0_1594327671399_0.14350827823396872"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3a44d36b.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.3a44d36b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.3a44d36b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"2cc46bce7534ef7046c58891f32fd054a1fa8b3f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.3a44d36b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-09DbaO2F9/CqRFu/FzzPf6Owsm8vYQG1dCUBCJp1PqX6iTr8vmoMRYo1JffGDzB94D4COzSeGSWY6ClBNh4ggg==","shasum":"83f96cf32306e0bd2169742b63ff5aae5df86cce","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.3a44d36b.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB7goCRA9TVsSAnZWagAAVuQP/2dj7grQ6sJHO8OLZ5Wb\n42dogg2MRVe7l6mi8vDb8mxExoqfJJ3D7GTPdEt+znY2x2GFiaSBqlzRTjdN\nrUrzI0FBNzvfy73LLw32NBuyrDMMW01H5k4nprdv3liRXXC8UDJ2/IOp+eEE\nwotG8ic+hKam/XS3g7vMEHnZ1YMg0H38cz9k5c9QaiS1sKXdR0YlcHfuD7+1\nz1A4auoLpJG160PjLWNIBt+rbgPfd0idDAkFczc5NxFECi0ixhR4Dt6X07oF\nGTen3z0nptxCU0e7yEC0WIqcn/xfg83X3G0ofHoR5HOORsV5kyVwxNrSGlKs\nXcIWOx445OrcNcdfd3+Otih0WJvpJY9UCzuZDm4UjpLf6YmDtB56fTkYQyS5\n6O7xa/X+F3iOcSbJku3OnQAMIAfdrzu67jSLq0w2Yg1eKLna5uT2Ywo9fSem\nbwZeaXllyzFl4/NCszmZtEDe6PCSTL4gTmrfn1N3mDULRjJzmjbMYzMUw67z\nBo2vi/5qVcBAkGGwxFRwn39ZmTDg6YDueaSVhZuFrGJ2a4wObVrTVCSFlay/\nKG0u5nofYniLV6re+LJOTreYk1APB8Vv1CAbPeib31hZ/CDjN1bTTNl23bzG\nfyJDdbHy9qVsnt4l9+xbyL1k7YSN//mJmX2vZFOzcEAqHeZtkacVUBMdm9ST\naUvZ\r\n=K6e+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDB2KlNbE6fsa+FGTbHHhkoLi4JK3H6qna+ZkFZkEwK0QIgD7wdXi9E1K7ETd+n0LCGUOSjrd+ULPQdi1uGE6bj7OA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.3a44d36b.0_1594341415680_0.29453729489194247"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ec11ae6e.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.ec11ae6e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.1e7cb6198.0","@material/mwc-base":"0.18.0-canary.ec11ae6e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"gitHead":"e68c3fdbbceeb46e346d694dad4b236fc74713cf","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.ec11ae6e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-rEvbxjGQJCYgIGkpR6mDdz7R7r0XBkWVVaJr2Yvy1J9AV/Ceo9F3c2zA/wQMDKgcm5VtYdtVEbEIHBIfWSwxCw==","shasum":"e599c086bd7aa626b7bd360e853bc9e46dfc4251","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.ec11ae6e.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKrfCRA9TVsSAnZWagAAT3AP/i5vbTocuYsyLPWJs/yr\nlHZTRHVqxJpP6QKKg/xOWhh+QdoOJe5MB0iF/RQpn4RvPAvzaURteN6ch6eO\ns7mki0g4RvcxwL50qpq12AtSjAxF8x95wdubaCNMDo0z+3VEZ1lqilc9euvf\nOEWScsZeONgur5OBTcCl/6zuv/G1DKMRXhO5qEIcwuSUcMDH2aYRRw0V+lWW\nJip+Dk3J4rqC0kajmN+TmAeoilClxn0IXoZxKE+MAVy/hnS2s22BQmj1gflb\n4Faf7C0FVRj8v1kbFx4MaNtcJADVxFJ3wUUX2DsVfIOn+OTHEbefDnfqChAx\nxHruKuBrlEu2iu4psf/rdHKuBF4GWV2l1qgyI4PjLBDV/rpeJU1TXMaYH4S0\nu494FroU7tchHHsv5VWFqh6myPUUvfSfXjfX/K13hKJ94K6CNUhWTmfRiReq\nwivpW4IV2zOYNz+7vZG5jEhrcSV/ha8/RFXlrrKXmDA3I1CXgWI3C6/AeC4l\nRYNMCjyTdxuhs8rrPNv3kNczARNwL+eQ1f7PZNqsN1Y8lzN/Rq8pI5yU2whs\nQc6QpdDrxLbhmS/JXIpWFtAkmqpd6qt9Hb5Luq5Hyq84RALKKGGGdczyZ0wq\nBJ07T6WGUjXqxujMFpWfrPk8ViR2L7yJK8X9yVZYnZwcodWsIoxrNPfPR+Sq\nt22K\r\n=y7cr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDU5Owcq2RQiW2o3cymkGWl6tc9mWhZ9nJFfx6fzBGJ0AIgEeBvZOXNfHmkVLOnm+BKFsdUVk6LF3T1bbELSOv7bx0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.ec11ae6e.0_1594403551067_0.09455682990524017"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.17f6cf27.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.17f6cf27.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.b2edaeead.0","@material/mwc-base":"0.18.0-canary.17f6cf27.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"a622acf92b818bebef7c3f77eb5296521068d267","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.17f6cf27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TLl67EmjNpurB5umazd2u6ekDEPy34thZFRkZnCccEX8AjsN7Hn/nDu06oeRCysIxQdJNxnQBuS5JX+2tZZeOg==","shasum":"f6533b9944344b154e2f0b3547571cdeff53e675","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.17f6cf27.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLQ1CRA9TVsSAnZWagAAmZIP/2RmenaMZxUKzQLm82v6\nMu4UWTnWmOZm0g4EtFfvQLeCauvdka0d8zsMyFRzmH4FHjTne4wBEhQWhbvT\nhCyMP3/8ntNnagz7MGwvttMdGMiU/ROKLeqCmgJCa48Ujz9OJPU8SrAmcTC1\na2BnGRjOuYERi19OB2A7eYXxNqrviROx7BNBMHzKpzToXYV00Gj7/fC4SHPN\nCNu1bzAr/sUlIpTkstqp9vYP8zrK1upXHE6XRdVK/WBYPyaNHSdQHT68FoJa\nuqvWwUjaoCCe+wEc0HlnxbCvLRfdlaQAb7f5uQm8n+YHvkOLP70S7xTwyD8x\n2EoXhom3tAdA2ngbI5WE5VYCOYS2vcYzXnSwthGn3I/vLCkfRwoE5bQ1YHTs\n+aGPGFoqaGsxv1rk6ynNEEpyz7cm/n8JQMHcn+RZ+E1nkKTfFfwduKMyMM23\nIwYYGXRGaA+lXo7VOIioowywowbe5sGP24EoNKKbqOGF4e7B0Jy5KsByQyk2\nIn61ehStf6pv730XVUQARuoIAkehHsFJ860xppzcupupHeWAt7Z4rbEoZ7ps\nI4VIQH9Yru78TBmEoRWB9p61ltDWCei1YiGHU3LK5ZUXwsGenQlNRXOHTtau\nMDqv4zMcGfgM/VKMD2wbzO4sB2xTWtuZg6T0LrkSJya7pXq4+Z+9FjlRUaW9\nnim0\r\n=YjDm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEgsehADYW0Y3D8nvA4tT7E98GEapAxvGosPrqg9YPCbAiApVFTLzJZ1NRXb588zUthYUk/Ap/HtnawnVcLAHrbaNw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.17f6cf27.0_1594405940943_0.8470756865464557"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.efdfbc21.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.efdfbc21.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.b2edaeead.0","@material/mwc-base":"0.18.0-canary.efdfbc21.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"d0c5bf147bc31e55a775562b113790bac6052eed","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.efdfbc21.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-C6B9s1BT3sLVmMjg9EBj7X0UDbPeNVDJKu1YU9vknIo8OboOtFRom8OG84bHUBJHac4VCWkUJvNa3BbwN8Lkkw==","shasum":"e6e2896eafbb83daaa31524488f7e7bb442d1a1c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.efdfbc21.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLb0CRA9TVsSAnZWagAAingP/218nvWfxcFEQ3XKqnel\n0HHE/Yfo8livsqo+mUAYUQ30WPBls/Hgl1a7s+Y1pq2I0cORWS+C0vPBR6YC\npxx52cZs1h4X3Vmf/nv8K7Ekg5GDEJSisiRfTiLBbGxdaL+boAZZPYj54VzH\nG+kEuDJ0FcIocZAdjz6fT3fFqG0o0sVdSI0uA7l08RqgJx/2zQeOD7I8eLzi\nzrkbTM4BqPNS4nSy/B01WUl+DbE/ulYJDP0vB/znZVHSF5dhhxwqvWVgB+oH\nEKhlRaG0g4z7bf/ZQN1kMXS1ejz+mIWirSzDVEW44cLWQK+W2MRAQ19sKxsd\nH+EFvurH7/e/Az2drLrWOngaNZV4HqSL9iOtbOZtRyiQA/l9lJj9J/+59BV/\n7Pnv7X2u3U9+N0qmegfHwvRTNQCHCI9j7YtH55Xgh6Y7CrYIcuPd2KGqPRMo\ntqosZNBt7zG24G20VMu6IVbcFQ/zVKlkujQZUfujSXWGvaVQqOGly3tkYXEJ\nvtsEF1numa1/54HTvwPKX75OpFjnjwrXhX2yJ5ovGLealLMLB8+4ZQVYZqcn\nbYO9WLYWSZ1aNDwQhPIgpl8CEq2NinsH+F9lVkmKBhS4pgT+6WEw5mi/zq92\nfEYQ/4tIr3WIbeFcPz0ze3nd9tQj0/AvUzjycFRdEGeig8VKfncFOyJqNyTF\nR+l7\r\n=eHPN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLxcBqb7g/qeJ0BO+LVpHUcNbBAPDJjQkt4ZotHcu1rAIgINr4pc29xpMYz0skkBD8qgIfWOv5BqzyPpjgLrK99nY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.efdfbc21.0_1594406643935_0.7496877809634335"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.bae4339a.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.bae4339a.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.5dac1f624.0","@material/mwc-base":"0.18.0-canary.bae4339a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"gitHead":"3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.bae4339a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TPmePAYaDtbSQNCqesLHxyT+LOscGYP/Muu12N6AuXSXpFdwza8G3dCZSs0QerVyYy9CswbfDU+CWsunZO1KDg==","shasum":"30e9d55617fbb5badd8db2603015664090d2fb82","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.bae4339a.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDeAtCRA9TVsSAnZWagAALgcP/AoiOojI4fw8xCohtBou\n1cUUvKPLlbb6wm0Ls7jJhVUrrrsUFRKMFH4CBErR56MW726llIWwsNSNSI+G\nTgZJD76hsbo9sYXZk6YSv74ySAhZfVoYic+0IhBWtu5akXCZGbguIAsj+QL+\nkIZ/H9dxiJWYEDEkEtmbHcu3u8tf/sgs6Iv5MPEeLeQyFMTeb+TurgPTmhxP\nI9dV4Zdk4GqBAwPdqQN0fNbDM+adgvCmyoGIBgxBYMtbUBEAD5o6kTDu+w53\n8wtRKtxhT7zUj4houko9w8CZk+MUMW6bRJ0nM6UiVRr+S5N+CUGvz+RLReQk\neispN3Yvm4frzZ9VEf5CpUGQkcdNWx/NOeo8NDcFCjhL4Pg6+D7dwVFvHTao\nLBd+IrTFza7zIsLWt6DpboO4z8Jn12wEfLpK13NJfGT34tojbeJxxap0xKQr\n2o+RGcMbtwzJR3vWIMqE/Y2ZT1QBhoM9q+Uhy+BRydsgKiOhPEOHoi4VqOeR\nEqY6sqVVt7CZQMaW+aG58D7njMYk+EevKvbgTHJj7/qP031Vm0lAZ05KqAu4\n6RChxWCxYis8qiTnZwXSlMO2OAB3lsl8hZVW+4BzCzc9t9ce8++HdLZOUJmX\ntZSVAXRkx8Qn3aScEKVGxIl1elGWbSD6miMGFOnkq4AuZ3Bt2729CKzh60hL\nG56v\r\n=+nf1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG9jxf+/Hkm5ZfKMleXEaUjpm3hHdeaZUaYzNYk2Ot6NAiEA7gWdfyiac4oPayb3YcasTn4yUIqt70UqJG5+zGmig90="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.bae4339a.0_1594744876633_0.6131110449856267"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.28eac13b.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.28eac13b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.e6e23019d.0","@material/mwc-base":"0.18.0-canary.28eac13b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"gitHead":"26d5b26372c667630c62d9894c9825aec9e06f60","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.28eac13b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-AkOhopEalrewT/9x0ZWP1TvZOtjvV1/uQhT8kCUPxmUsk6RnoaMjmjRix9Tdh8ZyoFKkkAo1jmIHcMFYHJWd0w==","shasum":"efd401d75bbcc31cb45ee981d3bd9044369202e9","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.28eac13b.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDjBBCRA9TVsSAnZWagAAj7gP/RgM4+PKvei6asBTNUxA\nQ1V2/8usCkTvOMwwEUbqCC0AwKlEzx6HkcErT/o0S/kLKNmXz4VSJ4e0A44w\nvnez8P0aAU/i1GkK2p0ZaSwtfyyZyIyMClPo/QRi5oFW7xfnQayf9bOSlBT6\n9lOtC2fkXYRRdrzyR4U0haXk+dnExVvOpH3d5uU9z7t8LcR+ICubyfnxqr3S\nabf84d3AYOlChVjyZol28N/cyVPZbintaVt/qcvWnCWuiKJS5C0aiVn8GVTu\nn4NzMOeRRJf5uWkw6AW4VIsvbl6AT2yZvIhtwDL7mPHjkilL8tzK7Gyn2v1Z\njMNRUCN4KnryytznGmkIJwM0K4SPRWZaFkg4/7qDqGMz4FG3/wAwAA4otSv+\nlLOYJnYsqBaZ/2g11LysyoQ1FlsGLvxHbL9pZxlO6SocUY70ibj4o+B82Pjj\nAJCT2TXGXoHQJuPc/CtGzeZv7qzjbP6X9n6wV6oWIr5f7WNTG9WwgROAJf7N\nzZAoEcsWDK35OrxT6QY/eA8tGu2QxlqL8FnMApcspucitWk/pMtClC4XWFkH\nZ7AcUuIGjHuGB2/Qg0ZbVNZ56MW9gTE3nJyGC+bTtaNdnqTUfyFHucIR73hh\nGiS9AxvAsw18phtMQIQIV6NdVmxW85E2dk7xht6+HwJGlusgZjtQbHEzmbQE\nFniq\r\n=dbKY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICTIYKmCWPWrz8QCqE/YWQR4ZVTGbmeKNH5wUqbejsSkAiEA0XqP8OFaAqV9cgWf178y/YmVWQAK1+J+l28zudGkZaM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.28eac13b.0_1594765376873_0.9063568736492618"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.44966b65.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.44966b65.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.ad4df58c1.0","@material/mwc-base":"0.18.0-canary.44966b65.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"gitHead":"e431cd0a71967599b61ba4219d726819807947ae","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.44966b65.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-aIwgGi32ywCQPmf448pOw9LLxhHX03PY3ltl49BzfECawmorsekw5ugyT6G29TaruawqtlSfN0wiUs2Z5Z5tOQ==","shasum":"b94380893c60da4450fa3718cb7676f3fa8669f7","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.44966b65.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD0UoCRA9TVsSAnZWagAAWwEP/2k9JWb3SHAYAxMCEkId\n8F8QytzYo46h3eTEUF7Vt2MHX3cAg/G4Vw4d5ojV+nOijMH04oRNQdK2qpCE\nI42sAkAM5As3Hh8tx27CbPbNcqp5+dN46LKY1+j4sKw5fuOu4Iy0EwUZ06Mg\nlQYTqOWpKSbkgdJ14HXZeXV+eQef90Y0/TzENv+r1NeDGhK6KCduilqkvgwW\nzIYWveQN7nEk7GKXfGg5Yrq03liDh44CDcwptGBIwBLQkOdzJcbLNq2yOWO+\nSG63cvtfZ80lBrOyenP+kDsPwbyGT5PwmWgXHEmm+mjxVp9j085wXZrx+vgH\nm/CfeH8k1WWVUws1YGw+tHuPNhX0Km2WQ5BDu7v2fwi4n7i0EqDmLy+w7lHg\n1xdl1k0qKXk9yL0r3TNCTtONoLUhLbjYmWbcoW1epswIsd0va7ETxPouTLCx\nz0SjUwYEX+H+dpXgwN+LmkOkaz862svkkT09PACZOqDMnRbOxXdPdxDpzuvt\nCFe3omN16U37zXG1njGJnYmhsKA6mU9bfR3fHyCE9TLYe1LvsV6CvzQT/KjY\nMtI+Eg2lDKuXeBA095o7PpDZDq/iRUMwNWm4a6eZn2YhCHttUXtMt7bF3bzB\npRSuenDqv5ATH7NmP4QPtjYnGGTsbJmk1L3BFuqBaTJ5sMrLnrCpXl5wRDo0\nBhlz\r\n=DIfH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIERRIcXjbft3oehpay+9FVFIz6cI+0wYaXktQNn4Kd90AiB09mkEzwZ1x4n8tE+0daVWsQnD989t3mx6sp0ROW9wTA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.44966b65.0_1594836263913_0.845149404996494"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3ef0ef60.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.3ef0ef60.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.01db89053.0","@material/mwc-base":"0.18.0-canary.3ef0ef60.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"6fd176476c86425b826862155a44202aed930407","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.3ef0ef60.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-P0u+9disUy0mw0uqsY8bP7Yw3k7+YRM98PHIq8lFAeKm6xgSwwtiBbZrAcSW2n6nH21wgicik77XQANE9/MQdw==","shasum":"765c13aa9f8755c9030ccc5893883074d170d457","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.3ef0ef60.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIYsCRA9TVsSAnZWagAArigQAJY8d4he3kZ5kb+RHb9Q\n7CzfRBdGE3e5/YGiYNAqObmnKZNfZXpvQZdArMnY6BW8+nLFOs0Z0EcutLD2\n463PcBnTRuRqObSB7fNvl6ipkqaiFR9ahuhF2fqJClxJZdN4qxxfGodZe7+T\nD4gztERmAlTMe/3sddg+kT8QKXL4ptN6OuVZrqhD2tiX5hxkAkDz6ZnyGOPu\nMpCGpB2CbRK8loTmCn+8L2fR/Wa57Y8F0+eLvZXr/wwSTPQb/SF5He4Qtc1v\n5d9rPuIgETtQoTHq5p6Hpfdsyqv3oGV4Lz6sBsxA6rRkbwXhtLiZsBSYqux/\n8g+9FlBoIHZhFu+8VSbjw4pnlCnbANPAj7sgXibarJ9RVT72vj34MJTAF7cj\nJ7eWdSI4RdM2OadzuM4lVasu3kepFtwXU2w09lPp2nzkVhueU7qdm75Zdb6S\nGjSEkyGHdQTPmiJA5hYiL4UCGpBsx95xNlO40hZM661n7FDG2RRXMGuCoqex\n9EFFdhfuPD0r9wcyQba+u/Rpa4bv4K3zdeNwnfYke+J+8qHdHuPoeVtP6rVW\nrfttrWxiBNPvDIkpL0cmz2R8g65YKbfwe70oo3dgAq7AN+S7m9CoBcPgIG2s\nuVznhaEVnAlg6HnArSv4pjZ+HemomxLg2Mqf7UNLrrvARDBM8lTTvsFYmH1O\nAKDB\r\n=eT2/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDC7y3UDdH9RNsYwEafNhcn2RQ2HoPnU2HaAGoqFI12ygIhAN11JmB20DWn3fc9QkZPTKnSZt5R6sbEa+Gk5UAUMbQV"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.3ef0ef60.0_1594918444068_0.429897516102689"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fcebf9e6.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.fcebf9e6.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.01db89053.0","@material/mwc-base":"0.18.0-canary.fcebf9e6.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"27c24842ba1b663ca72b52321d89d72fc7ef34ff","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.fcebf9e6.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-rstC9KO+V9Gunoww1RW1ikXtEJicIXSDP62QJdpJqKLTg6x5Ed9g0IJFU73JvijJ0iXd+iQF4+1cqJqSJn8UZA==","shasum":"2577567eac089dae8a691b65c26b8a166d726767","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.fcebf9e6.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFeZUCRA9TVsSAnZWagAA0M0QAJZOM1IeytHhtp+joPUC\n3juUJ2xsuzBnGBdKWXwFCeYdJdHeeYIlMa01eTy9LmUluCRUKiDNImgGPDHS\nA1c9rtBXf/0h9Y0FrkTb686cdOU0MTMe/Y7r70Am0xpG91per9ggIt7ZsJ/w\nR6z4g5NNSiCDfHedM7LsK8iEOb4c4QNE5TJwxpW/uqGmvkuEp48cKdekYhOL\nN69vIIZ5Thwz265i+qRmEYjysTaprGHEQJNt1jffJVWMYShzjqbzM1wr+muW\nzmXJF+0ZB2beUY0YsvAyBqPI8lQELrIYffMPfGAg0oMo19P1TdC63ffxRtiF\nz74gxe2BTxR7t/4IMZviwfhIZ8wfwiw17a3fhQtZdWp6qWpV1++Z8tcTs1kI\noU0zW7Ftb1WQcnfjHUBsG/FcSXDyVFJCepXLCnYmAMykF3JPYLAhjcP2ojvp\nI38l1bqdBBe1mTQz4fQXwUzV1MBIHTWY282l2yk8YwNbhpFAR1bzTzhj9+Vk\nelHQTcJFyI1hV73LhtHfWK5RXa+ihtfxePTsg31hFzdoCdynkmXUMtP4k0+G\n/Wb+eKOBZToi7bbTbSnMeM8ERiCL1cvTPIpFYSrhCSiZdzvcmjV81lBeMmoG\n/98KkN0poG1rpamh014EYaZcCgtOP/etffLjQN214dY5QmhrUTl0B0R0hAUT\n80mp\r\n=9vSe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEGXOJ014UfxQFu7gWs5KRDINmfG7uPx3u6298CqcmKjAiAeX8MjnWk8DrAl4B3nsJ0h3DLvrt9QcJtsAbcnPI3C8Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.fcebf9e6.0_1595270739896_0.0517873731550853"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b6a772df.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.b6a772df.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.fb5a4cdeb.0","@material/mwc-base":"0.18.0-canary.b6a772df.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"gitHead":"aff69a9137a8578f83238c4b15f6ef6447db7c80","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.b6a772df.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-lZCk7hcVB/MWHjm8+670wyG1OwoeUg0ULgKUOTIdj1DJWNKF0x+Ha41lL7SL2amaLCErySDfcrj/klONk3DgcQ==","shasum":"8c217c0085a6e2aac996b6b8bd4c5e42a3ec548c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.b6a772df.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFh6qCRA9TVsSAnZWagAA9TIP/iSK0LUXW/JHnrSCbSjp\n8rzdMuW5i5TXHWCdGuj6kMuL0S3ewb+uUDXVtICYsBoM/Nt8vWTa889Tfm7G\nThIFpQNGvF1ThLGCImw+TwAu0fPoLuzNPTJbWBgI2QtKoWkuJE/GNUp+w0kg\n4AMP73AknkvkdOgD+b0a/U54Sq91ufZi4Kc80Ih0zoXh4Esm3WaZtezLTDTz\n6poUQazl5eAnVJbFocvedDyLpFRhSfVDSlZSlhedTcdXhohtvm3Qo+ZUowOa\ns5kIi4MLEtQ8IweqHOxptG3wuC4MzLdlkjegplClEJTJLabXol+0HogEQLPn\nA1Tl/ek2tyUXHRj146vfc7Hw/BDuGnEUlrFJ9RRK+G2Z/eXcdB7DNDTv8m7G\nKGL6VU9PF4QfSG67iz6Po8rIBR3Ghwhcz+8RnOlv12M2bkZSu48FcCQCQ134\nKluh38TJdglkSWRSQ1UgiLWfziInUfVbfd1UhqHSlChcYciE2W9KH4SN6BjU\nstsLWjvbG4ATm90xO5em+PVBFepe4rhPbrCmDql2uIkvW6zwAzuyvSfKKReV\nU99cmHdRFRpa3eEmyEhghbP0nOixb8cZiWnoVb7gdoa8WsRWOKOiI1BovNlX\nDYMa8vmRLVggncVEo3UuZb94h18C54rF7YoSN2xo7xyJWin5BwA+/jD2DHEm\nqtvk\r\n=YN1r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFrjcUBcRKmKyi5ZmtwLxu8fklqg0Jtg+2zKHmV54bUAAiBLBS9y4R1dJJXMoeq75SrjVVk1qId9aHtgaetGO7wrag=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.b6a772df.0_1595285162046_0.42801887904271263"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f6a6ca38.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.f6a6ca38.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.f6a6ca38.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"44166a768d79b9da90f97e27d954aa263d27b4b5","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.f6a6ca38.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-XPD1tdKJVEX6Bxw9T28JahKSBO0RFcXW/WANaqqAeESf9vJvezopVvKQqNLmgOoZtsvB+Vyo0mp256f55K9gPw==","shasum":"cce4f4edb0d152f2d5ee6d0e00881fc4862dcc19","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.f6a6ca38.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFxp9CRA9TVsSAnZWagAAf2cP/33FhQ1mSYgdiStmJhMA\ndztNZp9GyzYspMX8iZ7+S7QQTo1caZDHwoYtXaah4F4BxfweYRoG+Ke+z9Dc\ntZwMLEessf24ORj2cNgn7TRvRGD9JbCFMBd0mr0Vv6O3k2Gm799ABl4YG7sS\n+0UI0qLPbQkC1DqglzB2prlYv7T6Wbo4vNu5JABKmuUh1VmJaffkhI6KoONm\nhNPljzwhAmIfxf3/nXNV7UnmyQfz1CsudahRiEo77GqPOcoTgpkODFNidxSF\neiITe3TNRZhxIbz/7/zep8t5WvpbgdpXgsZPM92T4Np3oCktPq1MfO9GPtDq\nAyUHZkInrtQGQEPqfi61fcMElHoxN6ZF1IvVVxlxFM0RjzBlP2N3cGoTInUs\nT6vYiYGeMlhVkE55WVlZe9x16K3cQInFpFHAITaQ9OfRcKrmqSw5QVZqhp1l\nwU90KvKEyZ2CTLeAveJ4tmJWxIjGSvSpQk26voSDOOQ65pe84C1fTRbNSkw7\nT9NTq/c11lmHrwUCuu9l4XziV1s66hKG6pxHuX3MVRpYcTsAtaUyq0KswJyr\nb8BZVLUrSVFekeJCzeF0+65kvnuu6ecBklWTEZgSeXlP/NsrnWSzXFTs8gXU\n41l1qlBVabdPD5Gs22J/Yjnpo906SY9JVKLmlqnVB5kk42ygC/+HZRFYzQ6u\na9zd\r\n=mUV+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUy4ET9kjemTthmK4yUdmzfhM9O+6mDyYiJ0Sxqxo+oAIhAMwjXsPxfAvkkPy8mTjjclpumzHdvabDenuc9FmLHL7N"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.f6a6ca38.0_1595349628836_0.3023359101742613"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.647dd6b7.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.647dd6b7.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.647dd6b7.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"ebb4e6346746ba552191ef32f6686136b75b1a6b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.647dd6b7.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-JmzWfHReAdxCy8HRys6C6ENLU8xKIEtYF2smNlXlcZ2FjwnSkU5Dc1WxEWyFjippsV52tP2dS53pjaNPR8CODQ==","shasum":"db995385cf92bc3daa714a9b8eb82a89104ad47d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.647dd6b7.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzbrCRA9TVsSAnZWagAALgcP/1JDerQKYuT61IIW2Nen\nsrhc+4cMwb9RSVhPv5vSwsrJxEgTU24nMWiOu+yQ/IIMNN8rEzRJBqoagQDW\ndm4lHbJjYhDc1xhdpGaSxdx/c8wibH5fD/K4z6o5u/eSoCAO8/0v7u+bE7qe\nyoqIKy8FjVclHroBV5ydUWGgWn5aLsEXQcurippyIHBLUKnquri8t9+4eTna\neC6ZoYaaEzOXa41JXUDsp1THn7BHIqZ1u5mzJnHrnzzCxBJT3oj6DxxLRWlx\naqspqSKjVwyi/fIuDuKWXyVgRee9D5rntdVSsnm9AluCguXi4ks5Rq1GoZl3\nJjsU6AsVLwzakKkW3HbkF1x2uyOIA3DcU46ZCWgfqyEqtP2FrfMUdUlYv3tM\nIynLGqoQmTxWDji/jgEPFF/FsEkUW+2m56t/OoBTrsqTcv7QZ5i2vgg5/j/h\n1LmyaQKox9tsWl9TffF059OTK7w5MXQE3GyWWTANyjOZ03AjuPQcsFd0Og1q\nP7qkE9Kr3WExiKknb4WaQezG/38nAqwzN/Uw/5BtC5AMt+cfOQNztfRFN5AO\nspreNrI7wKEIOBEOpK2oEwPscLYsfWwdrcnozWzZw7KeYZGYxXengZ6lou7/\nhmdqvXsMpbKZanyyZ0KvyJzTwoTaxtiECQpFI2Xwc9qpELCDZIk0F6RGu8K2\nnvyo\r\n=0/Vg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD684kzOuEdtt7F7xd/cLB7MMYoUL5G3Fpii4YB1vbJ1wIhAKQT98s83dJXZdKyNCaDcjyWvgDoWdyDPQbF2mopxaRA"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.647dd6b7.0_1595356899519_0.732849941409867"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3cb7406f.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.3cb7406f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.3cb7406f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"18d8050825886f251014bddc9658829794a0010c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.3cb7406f.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-03fi6E/pVhgLIQR0fHDXZjk+Lw7EnOz/BfnkZmIs3899jTa4pZi/6ectALiSadCcaSbK3HO+FFRHC9+fj734aw==","shasum":"7a0a4323d89223d3541037d2efde760dd9ce6028","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.3cb7406f.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGIv1CRA9TVsSAnZWagAA2g4P/0vXRArTyAEB246AJzzg\nYA+yYlHqixKutCVnk8xkhoMk0BV/n9aRi/5dOZFqns2zZdZ3qmoZgs3HmMj6\n2qrP/XpCFbTDQV0ZD0mY0HqyAvVtbR5QKprcR3TWBxPjgffJQGR9X+BWPLpr\n0IDl24jVj7pckrj8Ie7sZPpadh26ekgaHAMfdGPtuV3/uA3D05Qmr2Z9NJhq\naB67vfNSew0ueMGtyBzuENHDROsBLL1SaEA0kwwpw5pIRVT4dl26+rfgc9qK\nzakMEq8nKn6kfgBTfASXz7DFftaNGT+KO4uijbqnEihUEuFR/jkHOEIJC6eo\nUV69cpUPMpeV/ft6Ud5n01JMfKIzZkDI9mni+of6ECuWtz4hCOZgqB8stHMq\nXi+xmjDFcg341BLbIyZtWuC1pulbv7a6ymVRyPAv9G/uNy72z8LzD/fKsiNy\nO9RbIAAYLxbB1QbvXQgWCG5HY0lGSmjz9SrcDsQCjyw/Pl9F9SJS2lXKmSEH\n5T2M0ygffKD0blsu8DEcO3CoOEttAYNLOUijvJ7JbZVu3+/gzMz+TYLU0JUF\nvHPOps4jAnaEYIVghqemKQD4WYKZ3t8cgHRcitEZcLBip/2+Za8Be6KN7Dvx\n8PY8evtq5uwGWFp/l+opJEiu8cygDqWFmvophs6Q33burii93o96xYPcaG1m\ntb/v\r\n=R1Hc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFrzgYltaHinjfjVeRhiziG5RmmuWJ6wL3B57kICaBBAIhAPunfB5ErparrkWt0zZeF1KvmwJ91ToOmqqu4ZIWqPjj"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.3cb7406f.0_1595444213295_0.4761234500298954"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5717a5a1.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.5717a5a1.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.5717a5a1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"80cfd9e67c10918291b4799451796c633cec6f96","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.5717a5a1.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-QwaF1Hn5WBE8DGMUKiOovxfbLZgqyV3KaBr/u82yDZzK0z5qvDFtdTfWG0eFlYYeEbn0tfQ4weSa+ICxpYKT4g==","shasum":"ef775ffbd070589f6ba63ffb0b4ac47ab982acbc","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.5717a5a1.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLISCRA9TVsSAnZWagAA6KsP/jS07a3r/RmKGzeCHoof\nxnDH/N37Xv0yozKMjnfqjnvGnmKNEjuHTDbqf5qiQTON6ulMgpj1QxsftNNx\n6lhCv+ZYLj852GtM0zoz3Ay9Nb0ATqba3swjD/FaRmxvKjrpgW+eLqyCTjlH\nljsFJMH3Nys+gJyqbbQk5yheQLVFiq0PHNW48GIG8b2rXd1TCnedP2D176iM\nbIKTo6qO5/tZiqT0tzERp1I+Vzuhej0JmhItjPPb2K4rrlwmvl5LQVbxxtUd\nILB8O8ZbTO6u7PEcz546+UxA1wqZDG7MVkG1uiY8zToKGaNGd+lLjAodSBon\nS8BAvvoAChXfUXI34VYXBmLuMloN+bcw/jHMsDV+aqgE/LWTEZX0mYO++SOD\nPA1wkgXlgxEjOLirkyWcHM4DkcuJQ1+62ktHUC8QdxauZrTyYfNMZZ6vmlzC\nC4+EL9kdJKK4c+DwMzC1VXr5mkjj1XBbE50OrE6V4nyby9xChY/i7AoKfl6N\nKi4/tpXm44dj45WF7JbDYUeI46dls/ak4QRr7Q/hTyzJhlQyHsx/tlsF6YMn\nhWKzqYiBjVnLTi6Y9hKehe+VTeTvXM1FvZ8QxvqrRtfKBAHIK0Xx2gi0CKNO\nVns0ruI2n+vDK1scnkJIGIIFSEFBTMngMtvhdWD+WF5tAqf9AZbSRaOUP4f6\najml\r\n=um+9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAKD8o9FFT/r2xm6Df55wLYQi8pMA4KHdN0iBSvIIenVAiEAmIBqs54KWPnHoM9JiG+Cfg/jBgQDKMOEI3t+MbLf0+c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.5717a5a1.0_1595453970558_0.8251968804216037"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.d84cd4b2.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.d84cd4b2.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.d84cd4b2.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"c90ecef90fa937fc0931100e4f1d3627211865dc","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.d84cd4b2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ajUUefySwoaJlvHfeDdlig5HWdhsZN7YH2kQSrTx2mRezTkGuzAm7fveoeMdpJ3A5IyZpwW7+ACq7+r+sqJA1w==","shasum":"b4be8f10d9f546c308eadac4cd4e2cb7a3646248","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.d84cd4b2.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLKGCRA9TVsSAnZWagAAYOsP/3AJNpWmD1yKLJaFU8ul\nxUG8h5/n+TLi3Obc9Hcwe14ieP0bsV473k3f4gEZTycP55QlFQp+iMdRi/4a\nodp13q7GbaHPcSGlt0/GoJwdiN0Dhy1PPeM7CAlucsFFQ39fbNS9K6qZ3D4f\nvPgce0O48PXK3j9+RgTmPyQb2AS/4A90Lz9Ev9qzkRi7zbr6bdDJuOsckHZ5\njFVOxBikVslagYU7HcLCmgzo5ka/mSZ6ICGbevfRMgimwZ6jHHJ/5ryLQYBM\nDLNYaOSwa2zUXsGxt/YmDf9m4/El7KLE4aVZzW7t8Kmk+1Vd/XtDdTjn9S1h\ngS95gMw/MXRlKmIV8HFXS+vIlNHg5TvjbOqusyFprMiLDa+KgeMfdAY4XXGw\nnYLVkT7b5HM8r1N+Zjmwq4MLFbPGqILQ/vh7htX38UgNQJFwEFD6CLRdA9gt\nL10CJEUqqDSTU1mLzwBHABTZd3+xPjaTdMMzau7Fu+o19dSlw9rUYHSm668P\nnh5tLRq0DALimcDCqduRm9fhUGiLcGfK9hGpAIWZ2sfIVp2utw4ARPdajmkY\npEf4cM2OTLjm6T+t3w8I6+VnkLKc30pvVNl1XrwoNuYg+X4ltPf14dReaWMN\nG51hSZjOYtAnYpaB3MnhHPwGFNDwpv/LKXgTqHeqC5AkwI+XrX1O2rQMyAxV\nZONB\r\n=ij95\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWwK3r8HlJkaSR2QdjkmlxEfsjggYRVj863KR46H2YGAIgH3izOFQkW31rtfzkyd7qgwk0g7GZH39B4fuLwTST8Sg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.d84cd4b2.0_1595454086059_0.4895163382563965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f279e7fc.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.f279e7fc.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.f279e7fc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"73c3335df275cf5fb17f3b990df9c4b8184ce3ed","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.f279e7fc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-4sYc/stIvv9t43R9E5kYQ9w0OVSIciV9OfCaSYlcSOd+OGOL9sEP6vkLtXWnKECcf5Vv0l7gBorkZ4B2i6TiEA==","shasum":"5ff585496c3210c3d027c729d52d68c5c6fc492d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.f279e7fc.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLbwCRA9TVsSAnZWagAArBYP/iqIPoiO+7JnWxu+rwWq\nocZrHylGJiG31XBOpIzVPiN0TuW99T2EBd60Eq2LsfReAQQhMDuNdCFZOHAt\nSw24p9U41kwN0ZT2LYDtPNfgZX3HXqwNZ6JHzGjebZJXkiLUQnzsShWAqb6h\nQgsSMGbNd0k9KpKUDzm6A0jBpfYftwPpq9w4evuIIM9Q4GroF/oO30Ge/QM1\nIUyCFr8rFwbub+ulTpe6UgY0kcBO7ccMW9+Lrz9R3OtJJnfmm7HLxyHQ+iMX\nWAkk4Ri+sCmYkytkZJSBhbFX041Q2Y3f9/I6rNquwA4J+IRERbcklcT8uB4p\nDVOkFMHeCbQnT05KuH8ox8jEq9o0F9msnHlXTJly1/QNpXzRrM9UCmylhvfr\npTKxyBxe95lUw30czoitQXpI4JQGSSUwRtVBmpTqa2cqAauxOcxQtCjEA4st\np8vAtqOj4hyvcJlVJxIZ3avzfIE5+iLWUmP8Jz5v8r1T/WAJKlYIHZ9AuteY\nodosMG+eoSvzoI2FrlSYHZDfSGyDz/ykAk9ZBLXv2jADNmftUFHn2M8litI+\neRMmr12Qpo5A2p9vPuYnil37haS6CaSjLJ7CNyXNWpZsrpm7mtR5PiZzAeIF\nj5dv0+fTs0o7+oLxo8KSN51rLdZM2xf2vTikC1kmMLd2XBC46oyMSSt+p8GN\nRRXX\r\n=IaUZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgLRN39sUXDDIHY/TkEgkJM9nKcb01QRZeB85xvYqxhgIhAKgcbabyVogNLiD2DXv94I5+A0at5bTlQIqW6GJS2XdV"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.f279e7fc.0_1595455215763_0.019502119510156346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f181e3bc.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.f181e3bc.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.f181e3bc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"33201638ca11f3c34598273b4ab4ec40bb019951","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.f181e3bc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-XUo7sA+YbO/5uxKrO/0/aCG9gqja3tKulg96Zssq43BFYSUfpOwRQARiTGx9zIICa/nXDQLCYMjoeAYRhEjlJg==","shasum":"4bd352436e651b0080bd7e7a0698070b7cd0ce9c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.f181e3bc.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLdpCRA9TVsSAnZWagAA4pAP/i5shEDFks4CbX9ZYkyW\nJPMqsxWjzkAVi/S0LZxBYL06miy77sGudH8CHjt+vehJIomiiJ3tEEpbtJQ4\nU99inePkTbDtW9k5iZcb7dhjC32h1gg4NOuIX/7oK8hTBjdt6tL/YuXxMhJx\nXT/gbtGs7iUGGDjjdr9lcfjQ0ARhYcX+lJkTf0dMR4FTGW3Eq2aoVkkAIO2r\nPyTdjTXs0P8SaafKUtzt57CEW9bTE9GV5eqTvWPCUy3xmxl4A2yDTrpg/eRB\n3bMp1VzpPhbSBIuP6rLaMoX2FW5w2tuvZC9E/y8TxB6cAuUBFRJhEgmt4jsK\n/GfAqia3Vp6z56974k3IY5gtm5kPK/09Txmh2eGgYj8B7BL56eB9qPvrWg8F\nDgg6zzoaFcUoF1oxa/tkFEz6YFlBHIk9yGIxSkFThMjfbY6M8K6prNsNgOfZ\nwmv0yraDpaX86E1MiucIQ4O2yiz4NPph7HPUpZ7FvEnu1790TNxWqAypI4ve\ndnKz1LnJTjpAdCnaPS7Iok5qOhk6+Ar/Wq2xTk3gBh1ST9ZNLC+vu75DHQMb\nALcx0Vq8QfJGwJbvqXlKPvN97bZFF/3V6RAJcKa6l0mMcd2Xbdaui4qnjKzb\nbaENdJlPI5/2DOu2xj07+QuoYtOVsj4RBJHuCB2yAJSp1jyvup/WP57Xroxt\niCLC\r\n=ugYb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHL8/JFZJsElKyrCi2dgKAVOsEkTLC/aRsyU03bIqiS/AiB3l6Qf8hI61bW0ZF4R9q4MRWxqPoZJHXhdHwmX3hsyjg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.f181e3bc.0_1595455337167_0.15625761300502283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.346a622a.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.346a622a.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.346a622a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"03c5331dce90f41a530d3c8569d87c9569257d13","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.346a622a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ZGI0Nij9tgubdUwZAoLJYp1rDTgAsgB2TTOu47r4ufMBoXspEK50f3DQgbYqfqbWxixG1O8SoelmgToHAMZ4tA==","shasum":"6f669e9b1857c9de1c942b8d6a2d07f6d46b949b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.346a622a.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGM43CRA9TVsSAnZWagAA5mgP/AyMl99K7IJLw+FVw8Ne\ne2biwgSfq+dMnUAIRgz3luD+j1pUZmAWFrsuKHhDtcLa0NKalpgFuJmM4AyH\nI976O4x24QiFh/YkoCKX1aTQ7KVJedk8NUxg8ozD79xPuTczhgH+nrZra7GX\nUPCVU9s2+T1dWBJSRU0FD9pMhUwC+aZuuMXk2x8i4J/nyiYg7x8Ii7kLke03\ng6m62TozZGh9nQMhmXiWFHhAK1BWwjFujMnyAnPEupf0LtvMeveatnQvt6fc\n0PsbA6m2Knt4fYbTMrXnrprUvI0Du1D+Zl0WxXPNSqOdtjVPBMJ5KAvKdOb0\nhbedNIYjLQ7dy/DKkbwPtcQSxKi7JdXW20yyKMLhE4UVmoqDmL5630TaTHKb\ntCVaXmcTmvSTl14Z36UF/RhnD9dnIXJZvAFjqgLuFa7CxYmPco9kd1KtM9Hj\nLk4uQkpKfmCHfVrVY54gaQS3HT6g1a69TRzzrQFoTfwRjcjqmktGmu0lXT9W\n6mlssHqRBuJDLHBfyS3eirif1URRlLVTe9+9cAEsoyP1aUiuaG6LSVht88tl\n7vl26KQ+zMvHpv6o5cnlvDX6GUdlUOID93zCBh4fCC2RkBCHablSzMsmq5tX\nOb0H1zN9Q+1FlRY59mlQ10GRxjE+us89B436tTXJlFgBz39z2URImGLwKXkb\nxtjX\r\n=DskP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXWdC9rNxCl6maI2itWu5CwMqnoDXG6/GCUYfxWGE0uwIhAP44kMaBpuMXoPOgvDlDOrPIHELxy6b6zpJ07Py7/EPV"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.346a622a.0_1595461174618_0.26607920458680856"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c9e8a848.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.c9e8a848.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.c9e8a848.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"bdd3a24691563386cbeffdb8824ffa26a3c03ba3","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.c9e8a848.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-DepYQxPCdgIv51EDJwMvGL9D40Sb9earwqe70H/vP+QBuuRM6BJmQpKVwjUQSkl3iq57qh6OTfCZqfJBKEd8ng==","shasum":"a3d0de30a389dd5a388aa92536f5581b0af8cf7b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.c9e8a848.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGONhCRA9TVsSAnZWagAAJgUP/AsFEFdVV2geiSIEMJq8\nxGxFxSuxKvIsg77HZWuOalLkqbQ+sZq8QCrDO4sFY6d/X03Ln3a5SScNEeZJ\ntSSTnIvmuBgiTsHagZXUrW8sk1px/eR+cXm015qwUHDHkSLnvshZXD1jAdSX\nNjvqdAQQTAhxy5CqS0uOEwTu7g4F8wcCvWy+4sNpniXLstSVT5sIh/onkmmy\nGFq7+F6HM/Iy7h0De701G+1a3trKgoMTu7av3ehrDfknRZ9UkKWHwyVCiE7c\n7RVc87rZu0HRi4rC3yEaRK3Ahfd2LYbEnZmA3iBe1rCUu67wKzx4H8lhO42H\nRQsQVDR07l4vdZDecSog01kAyw0ngLFCBafz+wqVJTD6MBI4u4WImUF8sBvK\nwRpXDW+PJdw028BxftIMb1JC4DDftlOYkHYbKGjmS1MfOO/+gP9yAVls0CGE\nHdyqsaBNQqtxFhYMcUk47xZSLAeC6uMKhVCTVbOoWE9Wd5saekN9PjSLC0vX\nIl0/chXEuq/gTkmHZ45vqFfCS7WEc/6HfJIQSz95utYAQFSZRUuCE3xc3/qX\n+rq/fm0ZLvnYlY02eH1qAYiUhRRMdIJXWa+dAcv+Qr96eamJ34TV6n22Mm+j\nbVjXMvmI7styDwVuK9EzkO8vJgzt+huoo1z3WESFRFmDPGP45DxNJJHp54CR\nMl3s\r\n=jhvr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEjRNcuoLTRkrg/lHQH3MvWDlGduGJh12h9Fa+Ndd8FwIgEc1XdO8+wqh+SpKAb2n3R/ve0FwjMJaM5VRN3jUbQYI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.c9e8a848.0_1595466593299_0.08492963140760623"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.718c385c.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.718c385c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.718c385c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.718c385c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-/JtWb5Mah33bJHCb9w7RSJGb3fhdboKYTWGyw6E8Lx69ltViFBVX2sx+/+5/cu/i8Xi586DFoC+pHCozmLdu7A==","shasum":"a2416e1120896c3db3d902383656a2ba6e002831","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.718c385c.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGe2kCRA9TVsSAnZWagAAxWEP/imO3Pt+kY1Qd4HWsTuC\n1j0Iasplo2hra7F8S8VYtXQqSsOkfXFSrQOQyE77e6jj4ZGGHJpxKpDXW37h\nFoZQ3QFFGPsrDOecmqjBivt0T7OMGEOh4sYYWiLaNtuSJckGDEGmgXxeRzql\nTOXDkjWTXL/BD6ZFTqsbOBmhkBYAILm6u1IbmXf7wZsv57n6E5GLPZ5zgu0p\nizEbXJAdeijFinOEvav9zk5yZ1Hd99xZ9T45eHfu0TvRvE0zmDOOSTe7BP1E\nNBKdcIjWqBk8qRKyfy1MLW+C91Kotp+VuJgArExDnz2ntoz1eVYrSZj9f8sF\noC0WpXh/dsZQr0/r7AZ6XlmPCIJxoNTM+GV30zj23gTbhMpIL//SNxyO0vg2\nIXUlefZeqEDbaamxtWSYb8NzwW/o9048in4uxxUvEGAJ49WYhgsn2Jcft8hS\nzW4gvVgehOKXvt1N0nxQZgJr6pQiO2lRr43AQ5kO+msxo8gSTA0H4QWHkpwH\nYkmIRsvMCSjzgv2rAm8xwvOzBlAa1NAZKrPzvg7YCWL5w5Nv0gRuQY7EtYFI\n9ZLmsa3CP+YfRTtmlAqjxym+jwjl0E746O3P6J7FDMS1d3hLi52ed/xwYELn\nYBR24+TeDAqdJ4MDt5gZStL2hvOtS0L/rCmSbRT54vYGbyYLjAGP/xNYU16p\nEhtk\r\n=3w+M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSnyWbl0MWZNpL2bYiqRo7tagWZikEdobVpxOEBadELwIhAMRataEvjXhrRzWeXqpTd9brykdwvAbKDSrVSwwo2qBR"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.718c385c.0_1595534756114_0.20188903112665124"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.cd516a27.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.cd516a27.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.cd516a27.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"e3b4c123ab8be0eaab91697be67dab225c8ea378","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.cd516a27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-EMsh0uab5U/4SsBlCc5NmmMdvLw0vtvuDOJjCIlt3n6ss5FHLazqy44am8aLuoEh+y6M/P4WR/Fr2hG2eepp6A==","shasum":"7efee0ee5e3f0e18eb76af8bac69b0d589ed02b9","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.cd516a27.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzIeCRA9TVsSAnZWagAAppcQAJChUUI+q5vfXT2BU+X8\ny2Mkht/Siw9qze4D2paWPOLG6Knf0C2gFYo/Oj3IR2/JG1klLeSJw4oKSVwD\nZbzKeF++uni7CQ+pkv6HF5zs1CUEIEw2qJu2CDMZLhPxRUbhZAjgDCDpihZj\nVYE23y/c7h7jfNZC6IoNp7MXxY2/D1wEBEPV6GyrKYnvccJ9pMN23xDlg1cT\nh0S00VNBnSxOXxaWQSgTLLiIj6CXGPFTvIqg9Uv5IU0KdTk7ExOxcT3NF64f\nubMeGkSRdyQd55UkqIMNEdtHyGWbW4oV+SayEX+YkppLd+8i/295zLGoVA1I\nsg/FLfteLSLR8n4ssTK+joBBeCEs36ywaTv5zQSTd1Z1ZtXN9t1obQfFF2tM\nvfnrL1lDn89TeECGwNBueNATCdendMhKvDjVz37MH3EA3kH2vBpXqUbFJkNU\ngPfQhV6hjZBA9GvcMmzKxYTT3khsywvJywKQDjo9P5+t9Tq2YPcM/8SqLzsC\nPJuZZS2ZEzhP24xvxmFbVxUB9ZHqKOLXxuIvOQPdEnUjuh/ZrU2eE+JuXXpX\n7b4t3onz+B1J+5qm4ohX0LSXp2mqPKWXEP48Dsf+HbLTQbKPTE3UiXORye9J\nl94cPSB+FQkUZKdyfgWl8uyK7qozOSazGrE81afcsKk4ei1+lBakuyowdRnx\nrhkZ\r\n=pb3B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAn6SI3KpFXGmUbzmGxnivYULciodZiYii88p0EoY0MgAiEAmRaayalVpXfbQpO0NG+y8rJ5dVCGykGPdnMZMIwK/5c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.cd516a27.0_1595617822088_0.17706871513451672"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1f082191.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.1f082191.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.1f082191.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"ac40081dcdf0df5976402e0f1f63b1efef1f945c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.1f082191.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-EAjHqu3Xh4liCd13kVUWLko/Dfcd9iyGY314peJ4lk7wJi+3HQoyeHZp1fGc2k39BtbhpX7J+5pObe0acrbmzQ==","shasum":"304b96cdf0be84186d8ed2466160cc8a4faeb968","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.1f082191.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzNfCRA9TVsSAnZWagAAPywQAKD9b+BOqAaUbrUkNUfK\nparw03oj5s6eHwAMtQtsH32wMCnwez6gCBx5c0XXYQhWg3hI5eo2hk/QgKOm\nVSJLYb+cxQzTiz4JFZXJ7ErlzIvIUKWz/BDF6NTSO1hhSX+SfQ891qLG+V2V\nYBXM6hQY5jBQPNs21Ii/FQl487WZ7bH/oPo9uu+BCRaC4NF4cZ5BjxAvmNi7\ndTLL6tHyt8mKkSY/FkXhktr9elLODlfYC7mVZGcZsaVIrMGHTkvt1uJjisTJ\nk/s61LibifA7duaR/KMyRnD0FkdfoVXeXYx9QfVLj7UkmU+8/JwmKcve2hX8\nmWarXRoFks1hekNCqeOkpkgODOMnx9OyscqF/Flk1aCujSgD7X3F6rom3qwx\nAXB8ObAR6EPgwBVa24DQliRj17yvyVDQi3+GP6mN6svXAW1EVJxJmomG/TYL\nt4O/UoS++kQPcyCQQgv4k315aj0O+exd4OrZT3yErHXCK1Jm66qCZ4tJP8zL\n6nKrAYfeuyPYmdgsLQ/9TmZiELZmtePvdt4byf0fLOs8zkEaI+aW3QVtPUxJ\nKkH7Jm22RVF7TXpy84SQ5NOOWgCPyMwmIsXMX0e/zh6F7TOgMAk7Hvn89SeB\nIld1wSdQbNcIQUCOmIRUKe7coAjL6sFAL6IOpJfxtIwkCtaT1s7Im8AFwk0R\nSD2v\r\n=x86a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIExF5FHGJo77OYIm4NVOyzbs6jKUVfCkpz9/6tnSd73KAiAq8yRbJ1+k/lUb2imBhs0/C3sgYHrJ2eozudBvjNHqzQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.1f082191.0_1595618143405_0.26973780767281297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ea3e82dc.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.ea3e82dc.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.ea3e82dc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"acc963dd578ca338baf9c6d33a6a341a215c42a4","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.ea3e82dc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-oluLcp9XIxr9WEmgZqcmCIpfOI5d4NQGon1FSOLshw8If2Q1uGv8NEiUiKRrOos8OUT1NiS7SB03zrBmmTzj+A==","shasum":"346fd8b5727efec5e22110801dc8d3768205aaff","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.ea3e82dc.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzSZCRA9TVsSAnZWagAAn6EP/A4lHLQE3Tbx99JSliwc\n2vhXiLOv58Vwwv0lUsQqMltHDGE+JVBwH3rgXuwH4jEJCrQ3fMSEVsLBEKd+\ndcCorsI7hswGIZ8KHKH7mKcXOS5i+xiFeBW0hBVPxZGOq0IK9TdstMZv/NaP\nCnNNTOoD9gVwXWcrl7Y2QP4E+G4OoTFc65zZcnKo1UlZqcwwpu0P0gt/jOEf\nDaY5VaVZw93RIXlOBnT+23udJ3KlSm1zpugd7saLeUiiHRbHS+f5MIrNGUfw\nsSkcyw/ZYOmkeD6Ox+OIWQ9wJWwCFFu931AY3YF/va85mSV3aNqkyuVvwGH+\neeCjCef593lA2M84l/Arlf6oAxUsGfJLmtHRAv8CSjGVPpygzrtfhBWGr2qs\nxjQztpabES+KLSMIhqrFftOitFg823vncoCf6t3LNJJkCy35x4EfVdAo94fn\ninVTAquS+QvqNSIxLuSIaOCa9vEs4G+LYYUo65NXz6U0L5pwqh3dlgeA79q6\nY0atsNsohqj722Ml9SSDH3TJARtyp72SpIh6jThi36ix3qxqh1b5oo1EbVEO\n+sYYrbZNepST2wMJzrjGZQ0LmYnHfUNHGdLkoAl1Lj2CUa2X1pTbgXG4GwBC\nq12ZXVUjNR4M4e9ivKeiTANhNGzZywYqB4up7/+iUmqmNjHPiWPVY/jNiM5/\nPm1B\r\n=xtRx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEZdDiNNGKFVjabLkMKkdEffsgKRWE4AT/YTQG01bvfPAiBO3uxC5d2vn6MhIDKGfCZ2PT8Hx2akuqJdjfq0B1luRA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.ea3e82dc.0_1595618456869_0.9735999062741305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.94987b64.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.94987b64.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.5511e0aeb.0","@material/mwc-base":"0.18.0-canary.94987b64.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"gitHead":"53896e3bba08752d5bf8b9c64423a52c96fc448b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.94987b64.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-uJR3aImQlqbWo8FXTj1+Cau0HqZNVR8hvdWwmCLyHDqdMQneK6YtSbf0AwwOw+KdTg670C4I2M4GKnXyiZLVKA==","shasum":"4b510e8b214662364f6ea45602fb7fdd3b976ca6","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.94987b64.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0PdCRA9TVsSAnZWagAALJwQAJPvKVE0sWruld960KhU\n11Rx8r+NzUPrKL7S+QsbRk3KIgjSRV3c81Kiy1bpSk1bJycKXoKpOv2yUtbQ\no5ZTOf0IRqfo/tAAe9wF5lT9WqwjcznFBYCXvpRAnjA0LlnbnoS1zQthX3aM\n5nOi0M2QBH+RnRanQGYbbRcLAYR7aBDAZSgFjK2njUbWoMmhu+6tuaE/dze2\nHh6UfSRu2FqxTXKXIu+pwkfzmMZ/66YAFkhRxsyPpJIpLagrrTRzftRVdQlx\nM1hQqqXehU45O8wckSlWpxX4aXlR9cr2JBGzMpJM9ieKbmM59Wrk/di3FjOB\nP/dWO8pChE8cYVS4e5DvEH4l1r1E88dawlIIG4ifqwfdxluvl8/RvPLjAJnR\nlPu83VEO830dGSiGfI9498ttZYHXDToiErrLIV3viv2UZ7LK5oC7g5Bh5TY4\nVDUKFWnL/vjmzT+aKhjtmM/c5dSTrNyvgR1aNxQ9Oh6WoZX/d+wPvHBvTWZi\n9o1Gm6xAFvxiajJy+lgo8ODwvFe4X+YZwYKElb453ab8HCpZLUSdieEAy0S0\n3XpIQfKkBK49SY7UehYn/3JgHoQB6RwyhXCa1KVvgahG+HQbceOXILnJUEYu\nMNcxk45M21EjuxJdJ0t2t3GdNdmyfxds4V6m1uwXQfXUH3vvOdFMvb/Y48LA\n84E5\r\n=lKFt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBPNqJE9pyQEI2ASjhERa/UUdgW0TMX6lqO3d9EgjS9uAiEAtUeB1WMlelLlwa4gWj9ATpPeJWbQF6X8AAp2E7E2hL8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.94987b64.0_1595622364674_0.7518726138550063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ff49b7e2.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.ff49b7e2.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.ff49b7e2.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"dfb6845469ead87e451744df01007d8532a7a5ad","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.ff49b7e2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-QUhrDFK6vrhwJZcQxOd27QEutzPjszfI0RDaodlQG8U9/oiWgk9b4a9ww0lxuBvwNElZRm+XZkZUcz4mYEDEmA==","shasum":"b0ffb3fb8bf2df2d60943c4e1703e6805b152924","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.ff49b7e2.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyU3CRA9TVsSAnZWagAAGr0QAJfAOyqQjFqhUoJrKSS6\n4TgjPOIPNxNNHF6MYHeWlGF26gmE0oJXtjQgotRO4dZnUrjf0pSWKWYshzHc\nosbSnzPQPvYweUPV4avaLWfROBLhjqAOoz0I2u3xqXTqVsIIhT0/SiHHXi1H\ndzL7r0BWGTttzL/h5LrBh+vZwhqtwa5y6oWDRNEnulnO8JH3+ouWC5SKTAby\nRY3XqTraJCp8wukdAxGs7NCqccMwoE0StwkbA0iCMYjvZqSX9VqyF9Arp/Ei\nqu0ZXR6e7rwGG6TtDUY0RmPXbkP8+YeD9bVHUIGMWdu/4kZEZrf79zPmM+a6\nzlsfioBItbJdM0Wapb4AccbPChIJxNh3VS8NqD75uSt2koIx5cLyWEbcpJqP\nKSksHbYuAtuCHr6j+xzCgUMrKeh4R0SDn9TLWZ8dLCtCzntnMmVrAuh1yRwp\nFod/Uamjb/sJDAGzF8EQ9tmE3SZiBXWYCng9hJbraegETuI4m2NK6Rjf71sj\nrJ7nWhbgPRogC2Z9tn/5YOw5d0glk/khsLNSXCCv5+GKZQ7DN0coZRr1RMni\nS/j0vZs2Xilf4WiBsz3yNlph4vsIcelitskGcZwpcWaJ04vTPZ1F5fIzMRHu\neon7yAbDeqbnDQ+b/KsbhTUlU6juWzRDCS6HQH7eoPkdrtRg9veqODnOGlQG\nddVj\r\n=yVid\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNDlMxVzkMV77pNPwmX/25Dz1xDeIRfQH1WvQBZT/N5wIhALh3w7mG9S/nUCW9gQuFTxMrMLGPzLxX4WPOeGwNz2RV"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.ff49b7e2.0_1595876663301_0.10689021241059882"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3d334ccc.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.3d334ccc.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.3d334ccc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"620788b72968e56f9d028ba5ef2ee7d1b4a91488","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.3d334ccc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-YZG/unJB77xov1JhyFYolMeFQoiANaIuZrara1O91wfRk58PA5Bcur/c9q8y9G4WIsVeIWNWLD8qlbHDpu3vIQ==","shasum":"b6d7df56881090d2057bf7bc0fb6f61253d9b555","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.3d334ccc.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIE7uCRA9TVsSAnZWagAAbHUQAI6kvy2rJ2lg4BQF8sAo\nfT6B3l/FMbhGBOBb/2zmuaajN31MdBrOvsDOMsPe+6NRCZwpC/60rYUMYht0\n3z48VtNIilT3MYHS5YFTBzKirZMUl4vs3ppa5j/kYFa70wV5avjHaE1pQlRG\n9cJlzArGj6mop8t28lzqFkt+pl5DJ7Fdybk78D5HKW0wseIsHKe7gX4w8JW7\ns6tjgMSSz4pN6ofBUGhWyI9IqVImHVuLpF+aNlutibzVR7sGxptH77sKWOHK\n22iTHVYqljsB78XUiaGuHZG9IzQHsx1bwSvYL7LQ+KsESStvfzsURdYkHT89\nmoDOk7XBF2QXnfRvNeiK+/zh5PJlT477fwnG/k+gv7RPxN3uUk6dDjbILire\n39CudRNLp3I6Jy4Mps3MgGBVdx5Yg2ORPZKn7VO7EgjBw7zha+HIxrNXFr4s\nsvirmVXnv9RnEXHDDaTqRg3r0tZJTjrUiVYhR2o1DsugfjHiqE+yHde/ETDd\nEfLnQgfl/rRKk/OI7h3+auCCojdAFl4b7aWmRVLTb6x6IfkpDPYnbvVgT7IS\nBB5w9cZCA7Q0NGAVHgw5vFdc4pyMT0mzCKETBodtzRP0RqNI/FNCXrG66XiC\nedb4NbhlX/nDpEP1N99FqmcLdhI2sMb/K5srUyMmDemCu+MSzy1n70BNtxkn\nv5fk\r\n=Qt8u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICmZ2AsVHJ0GrWBWlp34clnYdx7dR98EmnBNLbd8zeZzAiEA86mbZ7MQfVcsbFsZKw56AeTRHuqy8t356O96PeEri7w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.3d334ccc.0_1595952877578_0.06585497324529377"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.82ac569e.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.82ac569e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.82ac569e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"0082732bc61fddf6b3c8f7d114839f1937e7d1e3","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.82ac569e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-fh/k3MreWDNKBgIjp1C5bimJQXYGjaBdwgr8+MzUhLaY9Iqn+u/nTAbiAjrQpDF61u2mjPf4+Ol7Hwhqh+1MBg==","shasum":"4c630dcc904321edb428a963056bb0164785390b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.82ac569e.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHF3CRA9TVsSAnZWagAA/bMP/36+HuIkKSvqBIq1OtYp\nNrE1BXuDmWg5ovu/06p006GTitRde5mZYIVNk+jCjWPQ0sg6iJWc6351wtz7\nPcvzInGXKyoaItpZyfG6FWbB8JazaSWuJGZdnVjx8+rqYa+wUht1JkPd+NBk\nQ3TAnaDVtmFLQ0GTZtiTper+8l/R2XhZKagQbnovMrRX3zl1D8Xyw1/58GXI\nxhUhKygq6Ef+YT9WHC1OSl9uAOH2InVprgIVufOBKmoR5whXXCOlr93nqAty\njveo3qHc1XlrWq8zWPCpNLPPvP8iTXgeAPfpUKuJZN4YzxpMd1FtWJKoQjY/\nyCzja8Qdo6JTGkPSQHWhq+FWBLSaImn83PTFAz1wJLDWWh2cCeKv2TYRTz4r\ntRaSH2uMD4xWBbJ6hi8t+uNczaPOP0p2O+nbE4Wadg4Ny0s6mvl66UO6Z7rn\n6S8HmSaKSkKRG6sOm08e5ZVOWzoFbHL+y34upFeW/sr2XLv5apQA7oAW/qd1\nKqbRqo0+NNxq/2QVvSxnuN1B5mOFKIIeH6Po27W4MCEqJKEDxJ1LZQXZZFsP\nMQWBYDDoxJhKJeDBE4pmFlZDfGLDNtSSmPKDtFdj38x3SFv1W3RXG8ul4Zfp\nKx1Es3yZqOpq+X7rdJDjj7HiNJWEgAxNK4505xs1wwZEzCK3Snvwg1h9DHeu\nCOj3\r\n=AuWe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFCErp19QJ3NlTPUw9i3zBn8uY3m+9Bs7oZYdveO80L+AiEA9MMRjSirUitMGsWL5p8J4W4c/MRgntbS6sfZ3h00LJw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.82ac569e.0_1595961718514_0.12664055039393807"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.99df7397.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.99df7397.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.99df7397.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"e236d384d23fb84c6f0db97495a598e8b374ef26","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.99df7397.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-8vjIng6Thk0lKZcJVtPBkybASVQNcNqHsC5jstmm49HELwSmeG7O6btn5N3GOiTUII2RtK/h47eYvhbS6rJFOQ==","shasum":"80769d1ef3d34808413194344167a0f5d7a221b5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.99df7397.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIOF/CRA9TVsSAnZWagAAFxYP/RVkeVHwt+ZYKmvTlJcE\nBixkYe12a68HoL2HnXFGtxkwneI412uB2FIJ+dqGJ4bhC8+IrNk2bff4bxZW\nza5Nwn0ySUmRTQ791Td9LeMVeR732Sx+1JzLcRxQ7ER8TbuC35xwD7EryStU\nugsNnYCLIhGkQQww5gLoNdJXV7kep4qexEfT/jFtsb7mKjoUXk5lvfdqdPkK\nQoZwStaxG82WPzrggyXpWv76cMoDMsv5orFBUjIYZ/DqRdHyfR3gGtc2oYpe\nSVD+BA8K2if15SFobv/0dJO8BInvMb5qfFohNAolbNjweCi8qDqYdIfdYQc+\n3K+AkEkv4dDDhRP3RhX1dX3d3g6T3dBSisSlYim09pEadmuHCSHq4e+YnUz/\n+WZZ2GrLsgEudymzNS3CRdiz8GxiJfJKS6pFsEbWNYiBYcPcePxLDHECMLOy\nNIXyMPzf5RYXAN3RLoHXx3Sqq4pwfA3Ycp0JH8/4swQlJuKgFWhAwZMw+HJW\nayKbWbvQQztoiqcqzKvFCJQXvi1UGlxzqbiKAgmPODGfP+oPagU0TnK4Bxbd\n+lXPzWRw0UtKH5WU1WrmDQr0ZhskwUAFHc5NBTUsEK6AghwElb5GqbeKH9+h\n1jkfiGNmNTkHQdkBnNTT5bsdABg6An8EkTblZpcqGsnRZB1lERLSnWzrkj3h\ncXVh\r\n=s2tW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD54a2JDEYe1rS5xUcZhap2p7yjfzrx7V/CGNKx6iNAzwIgBot6YYfxmxOfz1wRVa4qy41X6McxfHBTopExTZxT61M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.99df7397.0_1595990399196_0.15019336848164166"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45493e05.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.45493e05.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.45493e05.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"8423dd01198986c553ae23227667bc8148bb4276","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.45493e05.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-OWRdWNp160l6oD3MyYhA6lR6ej5K5ib6J9c1sZjWH6lL3pfFmx6QzaEq6DOetHrl0+cxhhMV0w1pBki4ylZ1GQ==","shasum":"0735d990ab62e5056a1ee2ea2155b8b24cc301cf","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.45493e05.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa7bCRA9TVsSAnZWagAAaFQP/iqvvBCICxi4+vrAL/Gm\nQeuLtWuzKfghNZkHAmwcNfDH55gJxZU3cArDwLLh0w7S73LHummUuB3dkOPP\n1nQipFfyBnxI2VRRwc6+hhRFoSIIx52zlA+hlQS6qeuzZoXj3mpYhN89dIyc\nfg+ZP//hMOZtg4nvAeTTObmwudqPNOaJKlsmfZvAQfzyTHmilUdW4Yi9xzj2\nd8vaOJ7G3ddnMgnMJkh0OMjpilJz1PYCKuQ23pSMj0mrqznajJ+lslYOtpyD\n9U8oQxrnxvhqSna7fI+8JXn5fzl5XC16eaOeEUqMi2Y78Z9/rvSYfrPei0u2\nK8UZOCBUNJTlZuhfN2A5gLUQ2NMzJjHUPC++LplbHbKfXa9v8iUBn/6QnwYX\nbA/Kpt4lu0nXEbEekqUEs2ocXOEkED1v5GC/x2bAyqBbW17oNO7Ofe/esHz3\nCsRsxXQqMKwgk3unAJUGMKSerx/1Es1ktIsIQ7EVRXZY7KMgW/QwL9vdw2Oj\nM4LEmez39TrkeTuHSUd3LAIQu9moSE+J9PKaNBCqjnW6VaCZ5IyQZJ9CL2o4\n/od06Pq4Pd50+VoOcupc11tQZ0uGCyR1sPj3OOIwxWJb7fk6tp8cb3+EVIZr\nukuGkcltD942oZUzHiB3Wn/ejPNUuaPI9O4b5Yq2pQKtQnY0eTrdEQubW4r/\nZx21\r\n=hhvK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClkSa76PIgt5IfWE6mXu2JateVZwN7aDn7hZ5amZ93uwIgBf2FNEDY//p4aEelPfQBNyA+EH4J4iIVjCu2KQhPDZ8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.45493e05.0_1596042971052_0.8013742352425302"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f2ab0a95.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.f2ab0a95.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.f2ab0a95.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1009e1c7d365921dcbc3071cabaa20c5e21e65e8","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.f2ab0a95.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-b4VYNxeWfHJ79+nQuAlFvP18sPWwpVN/aDtZlO7DLNGrgICa+Rjc0BgavT8aASUQBHhqqDz9Cb9AYu//agnQgw==","shasum":"e57b8cc7f6d5261370fa6a72088dd9ad2e894146","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.f2ab0a95.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa/0CRA9TVsSAnZWagAAv4gP/A3DfXRFprnhFK9CcadK\nCzA1W23kghtuIXcBkrsK/R5kaPIS+T+BU+AcltXktrJYC9Jh/3E/CZDh5uTw\n94MPrLJNPX03t37V+y4uIQFNZGH8OCGPmmRTxwp6a4OYOthcz6WvHuA5DRHn\nFZc7ub1YlVVPnPI9u3vcaXRRb4PmDC3zGThTmR5WHHoRHTHb+3d42Gj0jYHz\nWY1MzB1O/N8DODRZBw+iICVdJon1Dm3+xaN+mCz++QQCJDCqMdtFLyiHGr3C\nVuQzeIqZVChPpzJAYUUX0EoTCM6elCgXG9iPSXkTAjY02RwVvhiGUMh6KeIm\nZLJdZ6ZdH1rvocL6ys5K/MZy8rTGtYN/ERraVN/o3rTz1P/0YZvPja1ya5sG\nfjJPPQFFZqC53JLHUKcMr5IhWmx179OacwwxTOKz2GUUIZxsxdBZkATl6YvB\nw1HhpJFmNt66Bvr9JTd/Qt/kN1ap5J/J1IvHIQ2ykNAeH+kTvuS1LJEXdorw\nDi80OxFGK4zxkPZ8NaLJMF0Ve9cUzFrCVAwMDPyW0qVcyWd5cAgrMb63DNLZ\nDJhWoZHzLuzZtARpyCRFXhP7Q9ULD4CBfmZ3ySFn6zL0HuziuZ66Zdnz3pbN\nGnYbOTHE0PD1MMNm4d8fMSFXYiHN+gXP2erY6uxBS+3Oxga+K5ro2uPdGk0N\njvAJ\r\n=glai\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdLJ6imuvu2EEYdm54rNtoygGe60lmBwKiTq/3CE3EgwIhAJ6G3WfVLyzmm9ejQ4Jfmt1s2+nf7QpoLxCA68vWXfi6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.f2ab0a95.0_1596043252275_0.7908829758055413"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45f9eddc.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.45f9eddc.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.45f9eddc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1cb46e993882c87c3cced22481410b4922c1e1cc","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.45f9eddc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-HXjUb3Qr5Zq4K54UuuuIeF7QChG9t0MwZBrNTQ8nFCSKmmFVxiU9/Hs8yzHBkbuUF1HBcNkR5q0yDvKXozbZPA==","shasum":"7e2f7ee3fb9302bc2f25fd5cbaf7856895d5e4bc","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.45f9eddc.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhpBCRA9TVsSAnZWagAACkYP/AyWs0zWXTOnezMVnZpO\nqgqf18Q4iCQPCXmp3YQ0RA1vueETCu1O3oUwk2iwR9PAVLPmCu3o00b+N7Cs\n/IM2/DIr8MvzunuA/p9WK9Am0TvP9W/XmAQGe7YLij0C8N0XLe30yAdZkXIJ\nG2DpLn64IewCYZ0Uj1rxeJC629EIDv+yiPBi2QUDsh0+6TbC7eRHeyf4by3X\n3cha0kl5U9QOy2L1zYVHb8x5joPAiyrLzvZJzrw60Nm4xAzVXCpE7FOQQIYF\nJ0OjKRH5Dq8m+7cD5xUjPlG84+xtN+FJygdab8GjMg1CfedhUieBCKbwCe5y\nmwhJYFxdyt7vVzgU5mP2i95pYQGUEUysVmAZ8qWoxLphJDzw7C1il2wXJuZm\nQ9BFim5Re9t/x5F87Rzdr2/fLkbxfRjpThZMZIDGJya1n32199zby2ZPRBKR\nZZb2u44JmN2ydWqMMS/dotLKHpdCJ7f/6EeQ91ySvA2CHGO7I3NI1CwYuX7M\nGCZ+lPG9rYlR/MpmakvJhr4sQylXrpXkDL/elJnEbBoPX2saC1kkMFouKs5g\n4M/9Dn8+RR8apeJ5jgtM9OPs4rdUI+SS9gTmQxprs8IHttDRKdcpv8jkBqi7\nlNE+FY3w4UsXlYYlm+1TSS/WidjOUcFP/Yhe3781IpumRXs0If3tE0+3E7hO\n43Ge\r\n=6Uds\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDehwYVniVcThxBHzkuPZuSAy5MotDktEPU1YB9PQMRAAIgNdJE1vnZzz8nZ7cjVbqFZFkGKiUw2pA3QfHzkVrZKXE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.45f9eddc.0_1596070464837_0.5112823614403366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b64663ea.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.b64663ea.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.b64663ea.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"18456f1bd35a7bed64d6ca9d3d408d9d62d59c90","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.b64663ea.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/bVM1AewF8ZKxzDP9COt/vOw3EzPUlfV1MvjDTF6ySXgYKIuToMBef5YaNHsJouWt3btqF82WXZjLOrCG34phg==","shasum":"419e7f53c0d7e4b95e10c5563ade71e3bd35744b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.b64663ea.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwaXCRA9TVsSAnZWagAAx9QQAIPNUI1dfAnnsn8pJnpZ\nsD2wEx+1DS0lXuu1/mbE7tHPw87WlB62L5WodzV4rhFr9Jz+6zCAZwbCLz71\nbEUtpFluxQI+3gXr92M/Gy/dpUmf2GQfsujU0cq1dpr9J6/th3PdYI1nZzgI\nF1oxUOKK0W5OaFk/uv/DGuvUDfmyu8Dw+8S7TbBpWmXTposZJmqUsDZTloE/\nktKAZQhWnpiLqrrl/n52lrLB+nkqUuCiUfbaBTB1vUHBvDNLeuzE6L463LCA\n9TWkR5Ld2qT0jfXkaRdSzEL+bsKGoi4brYm7EGEuB44ASlghp7WDeu8XOvZ7\n2f1tcYB0mubiNX8WAsaiMKsRvCTxfSP9+5ZqUEK5pXor1FxNphp5ypaDFXDy\nKj9DhmSDGeh9Wv8NXDucsOR8zlWDUK3hQE/cqtc30KUhAKExFUndRvZf6lh5\nAbchoQPfFC+pPNi1g/5nIZ9Yz/h5a0tCMJIO0KCKjZ4juewmCPtqdpAb31vR\n2YMBnZV3ohBBxRsON0gxbUlRzKHhgZv8+Hz77ewUJKHzvmud6tAKWXBSru8E\nMantEDEZgztx56VOKXCighqQK75le0cLw7/lgDh3BfoKrB7Rt+pL8DlEwJqB\nIHLNembygM3rQS614O53eBfn5QUwH9MrO4w3noKQhXFz+dBHvZepqB6uLPSl\nau0A\r\n=H6nm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFhz0i6ZA8xD3TRHaC+XkiauEJ2uRwk5Txz3FqKtPKLtAiEA455SG5X/CE8ZGqma391gRZQMnoeOaQFHGDrXM1s0c48="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.b64663ea.0_1596130966889_0.041350747075395766"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.9a1a4d2d.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.9a1a4d2d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.9a1a4d2d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.9a1a4d2d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-DdgzGHjFQ7S1I7vC1sksHPdc3WyD0HyQYHQ5mrAxipyrPO16sViefMhUeUOVes3ulwN7f83D679rz2Mth1VN9w==","shasum":"01eaa2a89b533ce1780186ceb98f9a96292927be","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.9a1a4d2d.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIzWwCRA9TVsSAnZWagAAjfoP/1MixkmkjEVJiEOkHdbN\nIm9vDgJUpx0nuItfi/VDxWJcv6IFkwCIbiiSkygTa+u5J1wyo8PyVdZCsNJP\n/D1Z0e6fjtIs8gBMYKup254p8eiJnYocS595Tp6WxHYKfxlz44/OxoszD8OM\nu0SkfxvmuPeXaYVgnoHjRK5tSAWNnSFXOE+2Po7k8ru5lDaYWovCPM9R4HOq\n4cDFJuYcRv8K9ros7MIE7P3a41ye9Vv4GkmqhNploOeIClj+DcqUmzFPmr4i\nsCEnfVCZDkpGig6qRTgLtQNME4i4gftEHQpb8b2zk7ilItn2/Ned1MDOCr10\nAzUAAU5RPErAoFUTQbvmmP4IHgp7uKRIzmAdVEZQ4AvOSlzFJX5ZU1KFsSR+\nMiWuLXFxTqCZLaBCTsKLvDhJmF9o+QuhwAyuascDKeeZobzqIbElYU5QCRKa\n4QVTKR8KgL5PJWE5wZxd1qi4i3nv2d+h0hFbN30izXxRNCroWcJeLL0Wz3GG\nuOr7Rltgmq4ZwyZoOtNoYXXm1pesUs15kxGKnZknot9MASveKE/6ep+HWfio\nlpzoPMloY+oOGUPqQxcrJ6SXuWXP01lXWrV5vrmcOop5HdWUHnPIgH0CRus2\n/xopRv6tF0B21NLuq6WXTpLQDdDzzUdwUz7cJ6euPKkJ76E5hTvhxC0zRdXM\nqA5c\r\n=pk+N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtWKkZli08XqKxKIq4tNfm04eINWBUJ/T7/ODIzoTQDAIhAMI1J7wAnhnC1FgKEFILH4TOcLH/payR/zZVaHPdmDjC"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.9a1a4d2d.0_1596143024548_0.7736274927140703"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.887c2848.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.887c2848.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.887c2848.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2da757768e8d58aa4885027c78c58f8515382305","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.887c2848.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-677Thc3sD2uLBrpA9DGHuV0in0tOhY1YcZyF8wG54AoJUTBOUlzUt16++9Ww4vbUIaR5wlxz9N5+VZQl1jKy3Q==","shasum":"d3c9a598635c62615ac784e228bd4bf5561bbdf7","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.887c2848.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0QUCRA9TVsSAnZWagAA2FEP/jYCCsUMJSn9+cfsViOs\nOU9oqy/P2RBCM6nt0oG9jtuk07/kkOLfpRpwmMR+GBKtM1zTwAziZZ0sBn1V\nzFvwJ7hSTiR4dcgp5fOQljF3Vh5KbcaiRDfNIvhV8uKgdMkk/q/Pq+OJOzU8\n70SrQxcQyZmC4wWj9XO06sFX8tLJY4ogzxyZCpcw43Ss3JQZDikWEFHzlKJr\nuz4QzT9TbVvDsR+dPXhFaURjleA/HfHMWS4y4XBiutQ/+QlyVNp8GF9qAXaD\n4WqwZH95NQylMOLyyl5H2lsjkJBch0KReNyZKXDFv+mkNeu3XArj2b21xmve\n1ppX4KRPX4htaQ3ISjI6LRVwG4dNq0W5AN8INGhdSX8VTVG8blypX7sL11IC\nsN/S7z+6XbCtqw4hkXHub/h8YHqwwIsY33t+mTYwmvqY+jIMsn2roFC0gxZz\n7vHJxyd9+ImIcWsEkp6hLPePFIJ4TfpOPPTBgDiAKMmPUYs95x3njuCbe16i\nK1PZKOgfxCZ86nkT5jmBubqE99PKuZOZdhydlM3LCf0B5U0GPcjttl2ftV3q\neH+iUkJCLZfeH6yWbyDa4xQVmou54MHaUKX1zTuqGr6vfqN1dx0n6DbGqVC8\nHTDj9ElL3RZGPDetrWOHPtlwtfBhbRkQcYV9JSVCu4fJJWmF3n8i4TPyFrN6\n2LUZ\r\n=qJwD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCn3uNJKUI/r50vjouu9be+HW+H+dwgeJMSBCbE4lgu/gIgbV6UkzfPN+3pHsLQHDtp8vAZNW+MvP8f1c9BTt61Dnk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.887c2848.0_1596146707813_0.965394295201238"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.354eb695.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.354eb695.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.354eb695.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"75cc944c1c31dc88606fa2007d002743354e601f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.354eb695.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-sx0tzgZwIyxJJzrtwj3nKYdncUed73d9NN9Gbu13d7Vbv6wSjwCKtn316/W9doxefN7I/PIYob/N8V45rtxFIA==","shasum":"62f8b21021a09606eb64759dd18a40939522fd0f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.354eb695.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI15lCRA9TVsSAnZWagAAg28P/RGHQv+jPUGrhOIcrEYn\nsqoBh7ANxVH1xyVtrIkez7G9DMxlfzJ6Adn6CRxgzldr6uwC0F8ZGk5MQTmo\nvlIXGi4sQApovEXXDyCVIn3UctsHInWV0c2tsoUj5Kdf4jkcS3lrTDlzQUM4\nL28e2oQqYCvF3zTqJgUAxUOClg/GrcqqPtRGUnqTXHdvwd1gbxRn5H/qCJas\nkRkFLtg2lZXirFpKsLVu0/VYS0p/K4WFz8d68nppWwsor7Cy9wlPtSHKHHYR\nxNqZcwfadTxpZyf/pFpgo306hCJQVNJx8xka270SJvxsd8npgrPk5BumuQHh\nbZLU92ltCni7bcvvNiDn9gwd2SoitqaekUfqC7TOGVg9XdO71MzQnE8A5z/b\nnt/KM0G8HvUfl29P43bKMzFomj4YUlpTj+rrvH/8mTHVNyepHh2c7Gv+SrnX\nf8W5OPgVWXd47BxDMGiHbNilBYbU+QVCXdS7EfpUJrdc8b2gtzh+DGoPTWBw\ndEtDWGSB8kjW9vGQhNv0LnvLP3XkOB9+M5x3ujcnwPlabLCw+osK3zTAjNzo\nH/zrHLYA2u0MKt5AdATHqI0wgMCDhx0BCYZQ8F4IqpQiGtjQiIIeZdoNsfDI\nXmg2VXAPavkiekIzZ9GykRE2BwEOvopxy6PZKVoSMWdlPPX7tAMUm87F8ms5\nfi14\r\n=Uif6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDhz5PW+4/R9CcMJU/1fbZFSQfs099zP8I7jWtNGTC+UAiARcIRutRm6kHfWaVjS0s6hRGXjZvunCvmb1H9ug3z0OQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.354eb695.0_1596153445258_0.08231151607919829"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.7beb236c.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.7beb236c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.7beb236c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"9cb1508b49b8ccba6072341f23bae1ac67078621","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.7beb236c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-L+KwNN7o4WTAt9p1wQYBsukwXepx7cFn05TQ42EJ0JFVBlvk4nhHEuv/2Sbmg3dsqbCxSB4ZiGAqS0VXlublSA==","shasum":"7f636d5d734db336385c0a60079796822404cee6","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.7beb236c.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFd1CRA9TVsSAnZWagAAK9YP/jYcyNUR5l74IqF+ijnI\nt1RsH40X09ys+FBY5GC8RGG5CB87Kwkwjem1nD+IkxY6LuIAVn1KdNrZ8Mca\nUAona687LUiHRdeap4eHTAjLIxEz2GRaF1x9b8aNAtADPUjoXY8bmqsAXBny\nLaBEwiCyWL6aALiVxDCBw4MpYA0wLorloNtxlMhBTCYQibpHY9dwcoAsN6lX\n3Wyqqkty6syBHQImPrriz7NmwmTAIyFsjciVgvCIh0zDWzFtOIIxEeXLO2/Q\nNDa9hyMfZq+DJQ3SbaGUHDoFMT6Y6PGJgKZlufvsKUOxSMZg/mw+uQ0uB2OJ\nRHmw+gmj1CmEMJbT1dBxPpVlBgpiSdLJyTo+0iKwJzv4dfpbn+wR5RVvNIu9\nVDY1Kezf03YlYxkeXLCg6FcOTiQ7jWuWI7hv88jVNu0EHJ6Jt3RQ1JUq9xXn\nlUDoMKRNdf1jzzLcUPZeuK52JIT4UkAvCEczJRWzKjZePKbSq7vupi14ZsAT\nUu3fR9igoAE495RvkXv8aTwqcberhKzzSkNRN6ZwUVrXZqD0S1GKCIkLP1pG\n88ChTwWyYTk/NjbN97g14HRfjxayWYBGmKG43EVeG2YU9zDB2WYYaOFQ3QLj\nSI/Ti8cBqxkrBQrK8E48xNjAsCdLWBFEnxiOTFsiUJvghzbRV2pojcuUiv03\nQ20f\r\n=I26O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChYpygzOu7fvz/qwHmLOhru1HzV4Jgh73k0E8oXL3eugIgQez4Wi11YO9lSCW6Q5NB0X+zs6w8edoFWHcKxLsFVVo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.7beb236c.0_1596217204903_0.12783879422565092"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c44acc0c.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.c44acc0c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.c44acc0c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2491ff018c9a71195a5e873fa60b912085ec84d3","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.c44acc0c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-eAIlVcELGQqY6ibgBmvCzaVJ1/pXqQovuG7GNdjZO3mQZeHlVW8Ay5DhWaBEnih12szTR6bsA2mE1tEKVRaZbA==","shasum":"c69f89ad31cb78b5a0fd9b4b844ab9a79bec1ae2","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.c44acc0c.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJIjLCRA9TVsSAnZWagAA9ycP/1/AG62eo4H05IIHKHy0\nDC+7qoPZgYVzcJ1r54hPSv1ALAiI/+JLZQDaMu4qAM0d/tVsqLTbYAZp/elU\neHqtPmdlK7ruVVhxfR7UfToaPmgnzYua9gXXdriaTFBSeFyfb2ioyvJATNDG\nApTSSODQLHMOhisXjsF3qxV5NguX4sg2fDGamnefbReXduNnBcfHNfGfbhA2\nUyA3zCKcjQAklrWz1Zwttj3cr88X85vroYA/mJlrMS1DXV0AswniRE60I8w3\ngPG9AILsUoJwOfc9mrCGmo8QL4WmjEEldxrrmMnjXCcYTcYA5DulmD1TTsfK\nz3llaEOaCG5IWhRrMD6/GVDzb9r2XPTJ2Qdwcb0VPZg81iFtF49qEf3Oajhr\nRxjdn5Bmuwancjf2qn0cQACA9muzXXV/qWUG2oS5UEDE4AQX5ixrwTDsCaPQ\nevZ6p/GF5xtkGF1GlQf5vs+0gs69xLhGmE68m4Wo8/nH35RtP/T2BhoOLLHh\nACaVg67Mbda+7++8IGq/FsmtefKHcINBTZqdgFf++CrB9Tpu9qHVxUtDC0YI\ndHrOsUHEK4fcCZx2m9cVNyp48OhmP1mGoz1zA+tNffg9or/Uc7vlqFCY8KpR\nT0/OsgIw2j2WvLJB7gDanWvVlyrRh/fXzPiDNYUEPamw8j535XDdUFSDJ/1E\nx+gN\r\n=l/Ao\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEQE/RabKdUt0RlSeuIBRPTntEZuXEOhWgR/J8sUV+wnAiEAxKHxsEn1qwPO6aoYlc1s8fC3f4P0oE60pp4+heEZc0M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.c44acc0c.0_1596229835107_0.5577631187082144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.779853ff.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.779853ff.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.779853ff.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e06c13898d0c9fdc7cd494c68586a55eddd2d483","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.779853ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-b3ycrNxcl6+DpkCefdoCekkhMSOHh2I2DtkO6h8PlNmrTRGJfsfjXkK/QCYNSm7ZUQ3VaokRXSpObUkyPMBE7w==","shasum":"f833d7827883b7d012dcc37c66ff232a01e993df","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.779853ff.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEfmCRA9TVsSAnZWagAAdoQP/RIfcX/9//+2FJiKkHtu\nil5n2ISjnP+klfg6bd0WOWAgogyDBAIfRyaUhF/0UFZ8CiLD1w0rAF06k+dK\nnkpkr0pcvG2mQsS2vtSgvY25F37kfq3uiKeuSPR73UfCLXq4cWVxRYgPyzUj\n4dZULZRlR8C/lI6UkvzcQbGm7HknvsmoGzgDzrI7ZCkRWck+JevTZ5nCjDLV\nta3NLOxb1y7sy82Ow5OeSWqgp8BV/NO539fLQlCJ7pEcWLkGe8IQgCuvrsfE\ni8nfz3xjfAaiIFAFSNNz0TVZdSJtxABSPyu+zkFc33rqtHvbp32Dl+u11uOv\nj1CrsgMxzAKy4EQP1g+supnFbTtxkE82UgvVRhvr41Y/YVFPXgHaFd/MlO+4\nbEnwIuyuHWNtBNQRPYuH+7+Aaew+IVb5PH0tJxrmrdIdNbuha9HBompMu47s\nKNRdiHuh1QD7mtmVa9j7/9lS4N6lvNm4nqbj0ysR4HM8YSujRySBP1+IlB2j\nVrK9IvPEqNHsOfXZU5nly+TNK3kl87Gq7T9N3pxqwqCT/LRiLs8tDcsfen28\nVvtKyJ1WQ8+lIDZsgPzhPz4X4AgsLxyqBewKQrnXGQV8omlYi/Xx5Bz1eNsD\nWlH9lQ2qWC4rAoS8UAMKgffVxRG1AnnEKi45u/WyPsAWZdbsS4kmyboIE2LO\nKW2h\r\n=Rnfr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGv7xO+GQJBRAtnoQiWixkipW/lOMpdfvBjbu4q/ppLeAiBypuuy3oj6S6AWjiAxNe1F3B3B+5xRdqVT29wfDwVmdg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.779853ff.0_1596475365765_0.6025634218835336"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.8aaf270b.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.8aaf270b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.8aaf270b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e119651cfd9ab60def67a36255b4ea0ca1022d37","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.8aaf270b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-phKteTc4bbsfXSImfZWCszuH8tgURRatMhiEMOdcl0qvaHuv8QdUuy0KtnwRADnQJ1J5tS2dhKD/Z7gak9ezew==","shasum":"ef8659fb01377f37671c2e22671e7d15583a081f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.8aaf270b.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKFoQCRA9TVsSAnZWagAAwBcP/jN4GQSNNLRC2XQkuoOh\nbM43rNBEmi8h+AS+h3RsmpalXF1C18wfoVTRBwCa5W96rUvnOG9/Evp+hQJv\nEqFlBXi/7ThnLKtE46auCsVw6nl3WDSD+iVRP+hFmm8Tt/48ZiH1amAVuUYM\nza4hLWFlSPLjRHMeSvZRc7yASCUd0UxjTaNY7yfFajerdYMJjzhrZO0oeSy3\n4qYE6O02ar+o+hnG1SRZKE52wlNmuIjv8XYrPab/doFEnUsv0yMyhjNW3Dj3\nqXAsHDRZndxj0Wqc+CcYD2pAwfy50x3lIOz/qT3D7kV2fnYg8QD6JLoi8RGd\nJBKESqLDkTs/IjcVxUMSczgd83ADAX0T9et15ZuGMIWzzGQQwxutnSgkQ/VT\nG5YtZMfQLP0wjCRnsPLLC/ADlyBAEwNpVOb4sWpDtUjHaM2PwJdJ7D7bckxF\nEekdUVqRI0AWSNiS8ay1Jk25s/yDcyfsM4ZQwsyw+sBdeWdmT4so3vrK/itw\n5Sy9IJHgMqYR9gaZpIpiYGO8UPI0HwqhRyAktT0NoJGWVwL+vVGGa+h1LOeM\nBsIQcyKYknHI/FkAeLuTyDo1IDenZv59KPCFaZs+uNkcGBVde3DYn0U9fxi0\nMhCckDLCs9yraCeWdaCqA9QHATZuY28T0pYVtkthNToDKSOnyVDhkzahn9O4\nEJT/\r\n=/7gm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUlZwLeKBDZyRgYuBwOEYRGANUvMns9DQLM81K5w4AxwIgBcSWRdD7r00wf8KiO54iAlVAcGuNAtAUFet8lUHoOaw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.8aaf270b.0_1596480015526_0.6727657406586363"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5cde9f12.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.5cde9f12.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.5903d39af.0","@material/mwc-base":"0.18.0-canary.5cde9f12.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"gitHead":"12da43d72184f78a2245a6686a1ebff3e7bb03e7","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.5cde9f12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6Yc8YL+APWS0sSTvXn9NSlUeSsIvssrpUajQKO6LU3kyZVet1KxOd0eDANAL+/ve60o/6eDIzrMjt7j05xcCiA==","shasum":"221029c72f8b97e26c38e00d603ff46070df85fb","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.5cde9f12.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKF7WCRA9TVsSAnZWagAAyC0P/jz6Bw43u6QHt4tsap8/\n0ZqGg4xmJxTN0Oeu+LYgvlJEqpEBzFd4IW7tBKO4ib7EHVp0JhZKqcNnYMUi\n4A/mOS/pVMUDpdj5vjiW/67O82lhhRW0jDx6yHeTxL3JC77grmQzTdan6FDC\nNlaL+69TgbZBbbLSChnKNAN/SFGOdaLMjlVBs+JeX8n6TR180WGvWdegMIHW\nhFET6P+LKgv1elx5QA8mZhc25QGme1+FvmCOGLWIINaUQ0jrgzW6yZz8qYm5\nCGZupMrfskA/gIGIwrIa4F2y7RzONQsvtDxxyqtpK5IjEMKN+cFgauUac8lc\nQZ4Ggy2eC5/07Fn/VFaIbsGGQ7EZ9uenxLYIahJaToUrh8xBebQ/WZTzQUo0\nh+P4R7smBy2Cdh4AQNqBLped3GcKYB1s2c6kGAe1PQwd8nknwo0ed+oNg752\nleCjkaYFov+PjX7vqQLQETjYNUbQ/BXFbl3Akkf6MBYDY6eL30Fms8QOf3iV\n4gtNiZBxHnHIo3cxjvmXiOc1oqnoYvNRbVC7K6Yk/VN1TWhuwrv2hALp87mq\nmxh51lQFCeobD0HignxQKXHBH643coZ474QoFusWwDQOkuuhteY95IG0K7ai\n/c27zHprqkLtADb+48QMg9RbaYi6EExAhwOhRkQtXKZn6TZf61FGJYnRQ4HP\nBlE3\r\n=jIST\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLKT+GDvFtc+ANcFYSyzRwXgoO64jVNvT34TvOCvwBOgIhAPq9/VH3l66zMfy4Dqv4L6m9hFtmeO+S1TR7USBmkE+S"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.5cde9f12.0_1596481238449_0.537032314913003"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1607ec53.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.1607ec53.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.1607ec53.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"0ed0cf9b8288929f621c044aaed573575e7f23ae","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.1607ec53.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-eUjgv5CFA+O4MgSaYmGvDxyLZB0lJDyQBL/q0n//EtU+3quNm3PCS5igBkfR4JR0xCa4R2I+dN61+AxyL1Feiw==","shasum":"80bc2de871690373cbbec8d02f74152077a33342","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.1607ec53.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGmDCRA9TVsSAnZWagAAzCsP/3A18V1OFlNbDiyb5V++\nsESKwc4W3gHGQvIECdLAY77/Gq+mUGcmsdSCyPyq6/oINDKy3yRBCrnx8YQk\n4o/Uo1EraXDLOPw9y0+/TZI0ojW8zAhJWsJpK97agb+VLpTshuHH2Ae3Up7k\nCFcLf8CWSoDPdFSyuQkAzYuUzMfLT0nHIh1bQ5bCIQ+id3DtUHnTy+iivvwX\nML2Sz/pC0FmxK7NmKlu6AXu54d2jalxH1qVlqa+8Npzf7fo6jPyp5/hdhXLo\ng02XWfVqfa/oR+HW7n/6BtIPAAI8S6GZEh3ka8ymAMDRmrZV3vydSXSOfCxA\nfhHZCTBEFJRdEgdd0jqujoEzbXSWEigp4HWTS46XQuQXTl1TgP4BDvIjqf0Q\nCnBNheNdR67J/jXUTwmyo9ez6VfJjvFqUNhnlsqAGCB/ILf5+XjO4DeiFV/S\nUk6iB+t8FuuwzrwOv8hDotZoUFQIHiC/VdO88E/xW5A731GQ79WLkbv2kBMx\nCX2jb957G57GPrW4QnXNkwdaCBJGEBPZ2wKuOJIqVK6bM83jXeozMW0DS9Kd\n8QilC1zY48Jcq+bAHCro40M+II534PKMAS65i/oWwxg54dRDh85Yp7+/yFpf\nJV3pECKAfsbivWbWtA73cwjQHg+0ycQxiom3eH480Q7cMdb9upBav6/Ih+JJ\n89EF\r\n=TDUO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHG4braUFvzurHmT1AiwWNiyBU+u35zElrVql0+7/jDwIgfEsnX2rAdEsSloS+z8HFhGhK+oI2ud93YbBGgckgLfE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.1607ec53.0_1596483971314_0.576875255821057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.678b30e3.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.678b30e3.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.678b30e3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"53d3656f4039bb116e0f771ca0dffc41b500bb59","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.678b30e3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-qSf+/R6iY42zrFtYzditIQUM0SCmJLzJeHG8LN+Xg3iC1vSegAq+YPXYU7a1rOC0+ZEwTxAwYa6XqZws1KbOfA==","shasum":"4d76ac65ce36d955d69fdd9110e0a3f7e608f0e4","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.678b30e3.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGptCRA9TVsSAnZWagAABOIP+gOZewoEn6geqrSNGhpW\nJzJ21VvxszkjIzfPdudbOFJJHaKGKFZqhUaV8e+2kJsMZQONnAcCqznZok93\nXmOiCx32Ol/XOkjYv8Q/NSE+RbTc9q0BecM9VMFjibhSD/prpTDxw0O5pnQZ\nY+e0ny/o8BMqappT8Tn+8LtnVzH4Q9MBN5WLLLfwgVGM0k0kE4qzbuYzRacS\nxIEk7wVjXPWLGXk/L+6Xpc+XKfYadJL1cCDnVtQk868nUhDQmIL4FqJR8gVp\nG3u6yXzTUqZpP2p+CQ43oq7ACuvF4vg09AwNwSnUzEVBZTY9MCDxAKn5qkfJ\n/8yw66T8af72ZH6ntrE9qwG/aJLfDNMcvpMOsSQVy5pjw5kvkCdUMs9dogol\ny1ysIH09HdyHmwhTH2MvuYA5BnKEXzaZcknNo8RH7BRrfxUHSDdTV0O1EHyB\nui56MDoL70K/RiXXO4PwEFC2FP+zkEUWKhn/kk7+K4+TZCa8hxXlS4G8UkqQ\ntBhzbtqQ1qw8HU4ho/0my9r0OrYZVVFD+Hh4Ge7YuMPqhRLNv+d0GR1DLOtT\nL1mRG7MNkVCOstwtDSiaT7d47B0m1XtoXQFVP/7fszWsSMUA05HcEZA7SZ6d\ng1Tg490ReyIbnDpRZjPQPOB++AENY03OwHPlVpElOl0xb6MnMggU3wqfXiZl\nR7B8\r\n=MXdx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIERFQu0EyI9BwUdNXiXBsxMOf59KWXOHJNjNLHC5oaGpAiBK0pK/BUiHamw+9oNS7PrqcBVBf5gskKueP2e5XsO+/Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.678b30e3.0_1596484204618_0.6157959489125984"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.21c55569.0":{"name":"@material/mwc-drawer","version":"0.18.0-canary.21c55569.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.21c55569.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"65f46b7dbda996fd5cc43abfdb42943515aaca08","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0-canary.21c55569.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vf1pvHGy0o+NR4cln/FQ44PLsw74AdL9W9X2vFX9Zyk65vYHh3PYlBpoOeEA2UDQtah0kDS845ZVgCqej/l9Dg==","shasum":"1019e493bac760e09e57484c5d5887d2677ea363","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0-canary.21c55569.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGvaCRA9TVsSAnZWagAAjWwP/0jj2tjHFeSowoZBwRB0\nUwoZgFY97Blhy9tp0cnzLLjnuG6e9l+cVMDI2hrnpFIhOT99C1CgPY3rEg8C\niElwBb//OcgsGWmW4ezPq25C1xFPdfRcJeqbApRLIyUd1TN2dF9i+kT04kzZ\n7ZS5kGPMU2nX374BeBW4CTk8NxS0pCOK8oybU15YWcpVLdbVhZPCHUj/KUZN\n4gzGuKLsRW0VsgKIzU9rWsbt/gnDB7eWgZSOyix/+l639UzgzcDI184utRQf\njC123/3QvKfmwVRXf7rAmjwR0yVF21CZ3ctERs5DKCZC6019VzjAoZ16d0Ut\nntpkEWzZmqF+fq4UzdLSNMk3iypSKqWLOyWBwqLq27OADAh6f4uXGh292Egi\nR3fMurh2ceZs98V1BwHCd/Z19n6K4hucXjX2SsfXDF/elvDUv3IZGWY6wAvw\next7fcvrg0PZpzX5wpJPdXVLQPbjBRP9QpLPcg+RZppYTx1h0OfLK70z3dZK\nPJ+zDWN1PpHgDcY34u+TS4UWIciNNq+30xagct/LOpt69l0DuWlBw3cWNHV6\nATwqlLUjANr8FUzvPHGY3dKq8SS2Sg34BCS9cKo7n+BgtwXO80OXC4gJjnYT\nFqIIjQ25sO3yb9rNxy3rEg3XO1q+zh+jnsWtcF/zE64Xqd9sYrTWhLKsQx8i\nPRLz\r\n=kNSS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsNB0tAdEeG+69MqpLExWvyV/sb6lsgyqTs0xILy6m2AIhAIDwXY13bvOfKlqThUOO8S8URw+xVM3J5kKJFjeJkkHx"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0-canary.21c55569.0_1596484569598_0.7876410698483922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.907d4d7d.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.907d4d7d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.907d4d7d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.907d4d7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-RwOVAE9AHIJ1VsYqKmqbWXKuOGMsvKsj8+XZylBYRi76UcX6NxS0EH6rrK+7wSnVnr/tL2F1jrKtzhpMEDGkbg==","shasum":"db26e2f0604e0cc9a55d8526add867859394291a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.907d4d7d.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKH/wCRA9TVsSAnZWagAAmEEQAIqwzzsg35zGAEAY1Ekw\nXLMQp0Jr4PG/Kisdxs566kf58N8e1gleG+No3L5G93W3yJmVcu5W+C+mv5U4\n6a31qtbVbvHySh7mo8At1nGlQlJ8qs0W1jkYkrDeBcVcoYZZUpHWgdFla+Be\nXQ27hA9QxHglxSEXmipjK8z9WNrkMsehampszy8j71GTmdIHUVlinIGYQTH2\nwQ1gGplu8GLG5F5vw5k8mQ49QfimB+lKogn5mLVHSZGpsboETEM3dAfTQdcz\nKiqf9hNUFCMG4Yo3Ssf8QYrPq/2V9VdtdQO1Fcy59T2/Ab02pNPwDrqdg+fo\nMgC7392wfP33iy7Z35tnHlJ66DvpSDXIxLRE4/s42cW+MMEaFQHKn+EcXm3T\nHsvZTqjERREDuSxxlrK9l1/0I3UuR+2PWNGPIjCpmDjq5dq8Vwaag6YiOjcD\n81FUNzwryitcB6BQ5LPY1amA/8aBZsBcKagWvpyYFAcyFPUcTxSKO2Cs9N07\nFT9pLXdNRWTVxnk/Y5JBp9kKCUXvx8rkpnV/RKIfKUP/AO8ydEnP5NisoAqp\nQ/wpq85RQFUhphtZildLC4s3Yi3ZS1Znbv8auIfpmAyLh/G/BP39NQVnHnnE\nB3p3RR+XxD1vu/1YF+YSr9P5VrrlUwtXALA/Cr6pBdjd1oxigiXkBzoeFdCo\njemq\r\n=S3s8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXBlXLzJdw84rVm0LZ8CL0lEj+prkPEypCNefxeCf+WwIgDF3dCUbnhycOu6rBd/K8M1u2l7cCjSpzGM8oCDC1w0A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.907d4d7d.0_1596489711819_0.7818646201814594"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0":{"name":"@material/mwc-drawer","version":"0.18.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"^0.18.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"907d4d7d7235b3a3256595bce22f0d7db165adab","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.18.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-Kk4arwyHbDDRbpu3ZkteBDtezmydyaP6U/apkTnYRm/CAWbXpZXM6+fs+6N2FChJ/Evvm/7qDcaic2Kzo4O0ZQ==","shasum":"5735b38590e23f991bce3d206a178a8b597d3385","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.18.0.tgz","fileCount":16,"unpackedSize":70516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIB+CRA9TVsSAnZWagAA+NAP/iqv7xX5QShSs2r+Prpl\nRu2AjOYJNF7may7g4aXMGPuYGplIflm6WwDi3COQmuCGn0yXFkS2RPzUNL+W\n+Nm6i/hb1H6yjtmOUSm/zQupQANp55o17hYDi5S343iJbG63FXjdgm/yrJuu\nMYE4R9l/G35crwKwGNjQ2LI7CNHGewOr/IDZriezTDFR9l3hcliMhtSDMvog\nyoJarBirw8nEJjVUArhK4VL0dOWawFg44hHOPvs4r/tMDdYreUGCwz+HzaYv\nIi0IjDM5T7ShWGVcUxIfnqDzswQ9R8nlEneLIKIkQ7CYC2poDKHolmo7LpQE\ndm32ziEmXa9rGgqcentVDQIlM9P7Np4bVRSNATkUXJMNosNnEKRgDWy5JL5c\n9OFh7lLd0OT4AemP/ynEXKrEbU5VdmxQOmvMa11a83s463xiOmqWmBLiJ2JM\n1XeDB653HB1Qaag5q4U0yabtjJLgvkffn5AfioTf8j9zMCsuQ3fHNZaFD/oH\n5cKp2n9KEnAFkXt0bw1lxHu4/e79HLgKQElhIliu/0ObyvcKrM60l3Cfi7Ei\nGm6mVxaznz8HX3e5qTz0dPqIhNpXj2UKqbO8masffX8lLpbGmT5SbRPgJuWa\ntL/PxSr09MsYaRj49ioxdpDJoNGynqN8fr4VuKeTvtHyqqMJJapGbYpWQf7S\ndu21\r\n=zf1q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2x3C5gVDWHtWFfKhJ9yYKsS/lox0eEB7wDvNzplTrgwIhALRsNIa0bYseBSXXMTwkYG07rVpnx/6K+Dao5qzm5S+y"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.18.0_1596489853491_0.3860056635042486"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f7958e4a.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.f7958e4a.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.f7958e4a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"814d7f99f2c2016c7d56a7297cec2ee04c29bbcc","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.f7958e4a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-krdNNE3Dq0Je3B7fmiC1bIifsNYHKTItVcv/2E8ycuarqsK+q58CH/ohKdbe/yr8Fm8VfUYB6KkfDsFZ9EHueQ==","shasum":"c49afadae5f91a2c867d2c2ac70c9bdec1b9cdcb","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.f7958e4a.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKMKdCRA9TVsSAnZWagAAeCsP/jGfvB1isGV9J6GD+Yez\n5NzPv42vawJU6cfWWJT2btHlL3t1p12NPlrqgglhfUtTLxxyp5tCkRlug3+0\n3W4OdXQKC41RHafm4CVsYV7iEDJGBmHfBE79gogA4DTD5gkD9eoPLbD5ySbj\njzqBSdtqIw8fExWppL3DMKAZNhzYlmZonAPZrjMARJ9QJzg+qOWyFNGTfK9p\n4V3YxaLbZPKcwdT85oVzsAAF+bLkKJFEN6ah/0obxJBCWyCxoIMp/HgF6U/w\nzZcU8gdvlLcbAuuXKpmfDLdhC6qDXsxpNypOYH6CkYTJzldspQKI3RDrdhNE\nNVyLedop3M2zG9gT7ENk3HL2yeoxm1CKrTcZVAiZRrtUTkbBh0rLICX0ivY8\n9VA0J1agdv8NX9KLftD9C6IGeFtoZ96zH5+esHEg1x+LxAdCcFcdTFPrsw+u\np42fSfUVQTE/I2j296arxda1jmlyq3vwQXSZIN+Nw2YnTD9OxScdsJWNq0Qh\nqs60X74MEFFMFkNu7rBcQYxIgMR17/C3xWCUtXlaj04uxoA97LOmhOgnyGJw\nM3jfBIFYaGJhyuZ8z9aseKDncCVqUqucptYzgEfLQOq8NHWC6hXZid4VOJWZ\nUAzE/n30pHheEcZSsAsZsU309pQHB0zLbSzyEZvhMVU2F7XFtclv50ssmJbl\nPT2P\r\n=lHJX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOP4A7vwV7xLxtQZwmOzh6e71bepBRrCSnQgIGxpdOMAIhAN8DLiaYq+r2/ETrIYkd1OfuiROJh4rSe89RZv8ld8dZ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.f7958e4a.0_1596506781066_0.43426443879012155"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f8ceaf79.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.f8ceaf79.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.f8ceaf79.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"a1435334692098639ad087e00c61c1190812b959","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.f8ceaf79.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9rQSlDLH/LyBteY2WFSru3G98/PCHEEnBOrCMsr8bXKrORX3YLTE4jHVSPj0zGjaryCxoHAwu0Jj9rkgGt7bIQ==","shasum":"40c0a778e1c7bd3984e3d5d2a801144d57426895","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.f8ceaf79.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKbRQCRA9TVsSAnZWagAAYQYP/RHZFAKzcIhgXvE8h66S\nyU2GZ4yHFzf+0ioiydigu8wqM3vmW2nPAwZCUEBLpICTYZL6MVCG4MOaXudt\n/i6iLi3cLva5laUp03AvpnioE2C8i0buMM4AaXb8zUfPL1UkXxcZVWfZ0Ulz\nIrBE8QN2UxILgjiX99vY8oZ+ijcOQrFe8LLNX3GaXg/GYYITfuev2MkRxlXj\n8JgDCShQRjJE1PdxtKphUtpqJRpGkwVZu6FZUGjpuqSX5De9sQCO/RUI4V36\n0bioYcpYVO7YlzUUoPuTosgWd8RG9vncuW+lb52d+T0FrC7IYZ+Et7iirsE3\nmB3lQsOjqJIjrx5C6l2JfIFyj5J0lbT8RYpBpohO02l/gU6FOmZ2GNUVF5Hj\nFeaVbnkMHOVtKxDrR0Zn+NVzX+C5zC17xzm2CTr6jBuS1qEIRgFFMGKGxau8\nNc3J3RJHqxWv/bm3MWgVtAE0h+4BbnlBpC++j1/vjekE/PGvOoy7NJwTRfZv\njgiAfS6DaZamHuH4ZG4Q+Fr6ed5HXiPrcWmhqhW3bIZMFvm5UA/mfNgTifOd\n4PnJywC0anPpmOfUL5I4mAflNS+OKYSDFp6w1JXOk/MmTzpp3MG3LjerS4cK\nt3CpzPiNR6JoUx3OkIGfgm+RaOBVaGwRpqm7O5K3w7iL82n3YAN6ZOpM2p1q\nPCy1\r\n=e1Vd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBN/zGSCvFd7ZY9sWMNi/Tr3Gew01U/BiPpzrtnJT9RQIhALvrSnAAwYRXZferi9x247JLUUBuSzeIhaNsHurKm/vf"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.f8ceaf79.0_1596568656089_0.2270941283344241"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6b9e385a.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.6b9e385a.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.6b9e385a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"d264df08ac61122a6e48c33485335fe7444fbd09","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.6b9e385a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-pvGVkoOmJgmEWU1ECZF/ObvVHJBubDd8vm35I+YXMiO5i43+kht2/vG5ETOnvJEl4jSqltEDR+SJFpwTsvCuIw==","shasum":"3d2bae071328589908e34e045a6fea9b88ab78a7","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.6b9e385a.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKdMsCRA9TVsSAnZWagAA548QAIzsLABdeh9apd7cmt40\nhWAhBZh3viWtoEusUl9l81205CJfYnuwIpMFq9Q8YhUgxKEvbeZLJTWEr0h5\nFfTbOt3IXPRNiIKDK8J3f4ZcirSI3uLDtm0mFTJu9mz8NOiwFrW8sgkND/nP\nz7OPnKBIXh6aM3KMFx0PLpyTsWxMwP5oORSUFVNlnyRXeTRR6XATFMe13qmD\nqaMG/Vfy8eUNkIVJCbnB6I5kttY6Di10yFTTYk9rJXsxAkSXyU+3M/j/p5pu\nF0gDp+DOaVrCtkTQJUVARGFX0+MHjueREHOjUcCn2xFupxEjjrZGPypmCnXo\nFdb1EOYn8qpdX6AQWHcV/RiV6IfkEqSbxDlX26tYpIBUL3oUO3LXsGh9w9rG\n9RM/Pf8n7CyonBEsH58BRfQ3k38funqw+QcidNP4KHeMfGd+fRhfKrCCYC+U\nz+5DUk7K7z1ToFTw5I4e3g33gnV7KPvx8n3j+zcwpwpmhvt4VFxlwiu5UrPC\ndBsej65j32I4o21fCeQqull/Sk5vnqoUhNnGaFwixkG5RbRb/QQQ55wNFCSv\niUQpf8TOFoNydJXR1OfSdY7h50dfM+0sDGLcL7hbQbmKLqpnBrb1i2qIPbBu\nbIVB/292BXXOj3FxcRSUWtxziLPRS5TnmWFOBE9skhd9p+hueM5lpnVi/zEB\nASfL\r\n=GZpd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFCFdHpsIOe9YCoF2bG7hu7whWNJ94MReks/u07o/uSnAiEApMdf8SXlJDTfe51rWZq/BRmzpFhQLHwJpzw/t4ToyYE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.6b9e385a.0_1596576556430_0.2365291161901364"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9a7e6d2a.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.9a7e6d2a.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.9a7e6d2a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"162d034ba4d899bea7e421640d7cab04f0130e9e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.9a7e6d2a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hOF1oLQ5tJLQvXdURoeSQ3BR8O0FOXcyobgCs+Y3snaw60mNKOwrtnJcW3sU7pjQ/jUbTBSkKaz5zAF5jIzItQ==","shasum":"9b8bae5eea26053010094bd41d2d2ab7c1007ddb","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.9a7e6d2a.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKitYCRA9TVsSAnZWagAAE38P/ArVXRu6aMPwWgT/aiPO\nZgnclS55GW1Eg9HeD0Z/rj/oWTm6XHfTQdm2S7xyqMN0P3P22sRTq3dhATgR\nq0YlzcjGpZ6h/bL38h06Uj9PC8obIeyihE9FW5hrZbha4aWLESVDg6AsA9Lo\n0UxDV2CX0eEjp65XfEI7RQkgW8CFHRDhkSc5uCBkefoDYhCKoxMCKaHzspw0\noygTJ55/G1HPVdIP4BzYOzn3bRG0KiT23WikqAQ/zBDCzBEbby1zB8zoGwOF\npUVEs15ki0o8ZTU8eTVkKrfXg9nviIKgUNX3u6sT4e5XTdJJK4BnzQ1he3i4\n5kO1Vv2s2uLufX7C1FqcxxfgyK/hYfg0vQjLIm7FSvNn/IhLTaVBan9vgLgg\nmdcNFKHsUHwIjx4uyNBOS/RWsKr8K1l7kpr54/w+hzk6eTQSMTTmfhbd2w45\n0a0wBUirqwCCAJhg4VvDQsl0okj+3SPbTs92MU3htBuD1SMwguX8DF/PHWD6\nuLnM1vcXF+it4Bz0os0gf9Kz/l+VSPrgZjee1M1SGA1rcXguQ59Dk4ynjMxA\n66OgGAUEOHivwhPjUgPFkvaZ3lip+DTfFNuj7g2ZmtVA9H9DCV2feiqkOQjM\ntGe3vKS1/0u1r5Ek4vt0SG+t8j8sEjH53n/+dS7zHxngMMpC0vJSSI8qiOhU\nUIm5\r\n=R5Pv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6U6nGqXZdefxWGQjw2D1IcK50AULM4EAT8UUR5oFtxAIgRJBksdQnRu5hi/5UgaF0+tJ1c6I4aW7tOUdtgnlJGw4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.9a7e6d2a.0_1596599128100_0.01426205006953829"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.188f3f1c.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.188f3f1c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.188f3f1c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"200ab3c3186265d2084631aa4f47600057a574eb","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.188f3f1c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-XhSK8VKUo6/Rro5gqf9tCL23o0vcTeWa87qems7AOfSNqQxOrdjB5ydDpShptOtHX2tC0J3vLr51u/tea29Mqg==","shasum":"a20859ddeb969af980585a914f765aa62196ad3b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.188f3f1c.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKvajCRA9TVsSAnZWagAAUboP/2x/xJJDJ70YgKjcI44i\nQ7ukpQ4cugUwBgtYgS1BU4Nbw3lNpfBzwdf7qZYx3rRXCnWN6i//OOjAI/VA\nm+st1z0d2rfyiS/6C9zSBVixIFcGgkO3u6BFwUvUnEdvIQaPXsXF9vOwS/7L\nLM6Eng3tnrSGqBZ+2Z20AlMgxBQuz6KhRBpF3uyPlU1U0ubC20gnIWJ6BtZ7\n4u/WqhoraILC2I27I+o+mVdPWW0buqCgGOjCDQvuS/TaILUNCB19zhLpdAvO\nBR2v0/LoqkFFbaFqR8ritbqroaf1eXZdVXAWo5ARO/kdl7kcCFhnpK5zhk7M\nyeKNrRI8tQV4GuHBBJMmqqRbCfFeNqnSxgaDb7J9KPccRxw3uhTOHb21t5CY\ntjx447923EYcrvCWm0suv/XzJh/7zoOUTkg38U9Vm1Xh4YRBHGS0yyp3DqtH\nklYlqFQeXr+G56aoa9cBeHBH1ywgC1t68hF0irv80JN9RJisnRlMz3gTrSJw\nnWSK1D4Zz67K34qceSbp25vygZXxjIoTQM/YyO0v36APsmwjPEsUOfSXx845\n4VcYWjVc7emtSUsQ89XEqUUT+VudGSYQv42v221c4hx9+c9qWukr21k8mOwq\n4T5Vl5wy0QFypgL26/itdtCssgQ1Qp9rst+LTenklki5dmRfsMCtESFRR6uE\nxARv\r\n=YS2b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDm1AS0b0uuMdjRgfwNVRSK02akkq+xyORRhew8DM7q2gIgRqSm7q/p5hpdFiGyvfJwKkH7xmy87y/jIk3mwple0I8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.188f3f1c.0_1596651171307_0.985035620093029"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b6106add.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.b6106add.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.b6106add.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"9726e6593d779066f5b7158af254537ee9c9174c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.b6106add.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+6rjDglRgQ1CWND9Bnf0ZMPOdZd4Jl6ShwX9+aYcRUV/Ftyc4Xoz9ZYtTLg0+ZACU/6mjTw2FwQ+bysSUKQomA==","shasum":"8eeac1d398e1e71275187e958b363f00e3230aa1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.b6106add.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKxs2CRA9TVsSAnZWagAATDYQAJJdzFxQKev+89D027Px\n/a2DR/i21kKoSIG7X3+znB7batXKj4t8ctCq5Mg2rPbTW+1NtXibms/fr003\n8uz+pfZykjKmdBo6ayWHgoCro1KL+6El3cIEtg7xoyrHvpO2+CPzKPlVfOaP\nE9me6L3yeohQAoz4d0xVcc9DztekS0FfjNOmajloS8TFk6mDgYsFMgYqrD7I\n7o0FftLMhDZL2BohGM8QnyG053XSLEzeyCijLdjTh+nT3QHaXGLZcCa7qh7T\nxjtYp7D3GBi2I3bEQem1ekOiHDMrX3I9Jud0ggOU/5/MCYXHpPdXjqbvYle3\np5hODJGJCLBDR0SS1eRmXw77m5QrlWY3hUiBo8EdeWrQYVNg0pgRBpBIBhcm\nGwMzHnCWlPH4+dSjQcmFgkqen/MFftEjeIaDniZXDO4LNLbMJWcwRbKfzGTX\nQAEGCfaU2L2h7JByGD8RaDu2H5olOUAIijf9VQxDfhuAiunShnv7SG16HLS4\n567LBWBUPadH/WuFUA263cb3kbTM8OtCV1eUCe9zxRP1MYroAYS6p7+TcjJE\nxBkbuFnTegoG8QAOZCA5Amo8BD/54G3nKE9thaBLXUQjXApsG7q6rYr5VAk7\ns+yXV0VJ8mpEXkOeSyVgrhawR2RBO5ZPhru52izmmMNKWQJfW2I3dO+w2zv3\nrZWd\r\n=9B+3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdI7ZTvGlX9Ruia8iwAmoVLeDpSdddPPH+/8pibPRANwIhAMqcrGHucpNdTBihpUQYuNMvJgcGvb5HO6ueYfAQpIEm"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.b6106add.0_1596660533492_0.9061932229296483"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ebb4c667.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.ebb4c667.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.ebb4c667.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"6911337bd0577b48c85e4d3502ed5111b12a7b4d","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.ebb4c667.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-uDtcPC2B0c/muZKs5+lUcgIREj8lhIzqi4MW0Z0g9MZnV30YC+O1Q9yoGWJrX9EJa5qEV/ppOKPkTDznq4MbNA==","shasum":"9dcc8d6ca81dd41ea2476261b3afff273282a11c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.ebb4c667.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK0xKCRA9TVsSAnZWagAAIKUP/0aVa+U2gPvJBohXCFSx\nVQf77IYQn3VjNOJAZkE87LqYR9MVRdD+mJKemAN5taYAzi9+7rqnVyi7mAoK\nvNzVwMZ/rZBMbMrKPXWUidxITy1rEO9iZQcyAa1ZQyAsYGY27U4hnBaAiMGc\nTiwe33XjuHM7LSheBYgTEZqsoZB6CXXFR2RfFkqZZ7ehsCfZwk8YPn4Oa8nj\n6tWOiTQQUYin7GPNQhXuDMgFR1jMDlG16/m5/BuKjs7FgTwzspnOkckw/Xoo\nR1S6hZTOf1xve8nycGnPLgRqKnVOffUnPne4XnXbzjcFqk+JbeQ2KuvCHjdr\nxsvdscy+70uyWl7oWWpqSbgnxN36ex1dgMXgMuT55k7BDFP5boXlfVoLAXkW\nxQ9jKI34HuLO905wuXVT1Z/haqAQS7JWg1PJqlFUH9/T2JQVcLrdBqC8fBxF\n74QDatGJAqY79pR74fupYN5pWu3kSVOJNVglXFyuCuFBbms/ChkneaoY9fvz\nxNWjYfb4aymIuu0xQMoyDg3Yw0uReidxNNaLihA26q5BQuXIzQjnbY0B0r3y\nW89pQSJT+1SJ40joto/XhFBlodY7KgL2Uq2GLxmci3gYV0GXyv9Wm48E15Gp\nQGm9bHWFcilx6UWCCXsROPXwgUb5pTQ2Z9ZMwNFKvdx44Hc9DzTbzHbn1g4O\nsZ4z\r\n=gNGZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeHkd1y1oCWB2Z1N3fHvPX0dhprL7oWX0ww46T1UUiBQIgUhkiR82fL3RfZgdlWwemm6/TSg6M+5rmqGyLN0Fl72Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.ebb4c667.0_1596673098139_0.5878888765469517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aa44289e.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.aa44289e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.aa44289e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.aa44289e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-TcNktzysVrXPd9I1HYIfVX9P5MCsED7YvY0gIH7iZOoo4CjzWLXQhUaBA7JjVUvZWhpJ7EBsZ0FnkPT42LNO+A==","shasum":"fb11b8d03addf57a6ae680dfe5247871f028ee27","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.aa44289e.0.tgz","fileCount":16,"unpackedSize":70551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEtvCRA9TVsSAnZWagAAJyQP/0y9gOHFvA5pPOTd2VXH\naoNvmtewTjo5cTGijLNyn5uUyutPgTxYs+/Q0zB7mvzPmadxSAoFJaFr+gTX\nTkkm9gKn2VKbedl5JIWwPyZzvT5erc8hOqe27TPtsiQHLPhcABIXRjLVxf6N\ne+efnn4Z1+JhSF8coBJwzuN3GhRYDB+Pr2Evgj1KPEmNW4Lq+PammDKmW2QH\nN26xfZQt1bIhHMx3P8YmzjVzeZXPeqNPHNBSU+VXM3VFM3Pp+GyhrIV74UB8\neyX+24gSF1mGNkXvRzB5AsuOxyhONZktLjc02UFbi1sS8dv8srDJkK3Ki8uk\noX7sCjK0AXIpmcWreHyD/SY7NTt4jVEioF4vyyd4LKwbG8uj23GP6LbAGn5o\nNRBcyjVqeISZcFiczMoZIWBu1uFfTN2XXOLGbK1mzNlnKL4VP3AP/e0McgYi\nZcJUhLLufBvLssoT9ydWp27ISwHTnVlMB63UrkdcCtpLy1h1auLFf7Or2+iR\nRaJ7YKT05eFIDgl4a74MJDFQXUE6TzFT1ILJ3Q2sgLaNMa9oLv2VE/8BQH+S\nSSaZZnox8PWH9TlPO1pa0T3hMz5eqO0kmw6NdF5jLEGKCkIRh7geMSEFvh2q\nmOYAgt6ucxdnVx2lR7aiIULGgHHgq9asYHTFI5CgFNj1Dauv05qcB6v3dAeK\nQ+/f\r\n=BAlH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsecULitvBgrcD1tmMSQxTezVm9MNqwnu9dUlelO7xnwIgYzwi0fI8ekYzMALTwvDxzkFL2wWs4OltML3LChwj6NY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.aa44289e.0_1596738415192_0.014668033158454108"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6b0816b.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.e6b0816b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.e6b0816b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b80bf3f3363af2f1b704d5fe2fe2852cd416b902","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.e6b0816b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-RxJvvhHCXv2luuuRl4RBwMSfV6hac0pIeD6Rawzg6PCQeji9g08B0GNPDBlvV4XdfhqFVRXN80OdAXttMg6B/w==","shasum":"86f240bff14cf44b3dc8a8594d793ec7f678bd9c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.e6b0816b.0.tgz","fileCount":16,"unpackedSize":70647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaDBCRA9TVsSAnZWagAAMEYP/R2/s4Yr+YsBRZyIIUUb\nxxenLgSg2Td5mdrpVOGqD0n5RXFy2zOOZ7EDoP4dqZKGq8Pbo4YxopZ6tlWi\n014xeBwl0RFlJKM73bVO1l1/lNlvknbLEth8Lw/KGubYp2/ZSXDGna5nh+dy\n54oJSGb+1IeYE0wOyCJtmZCzxhIAwhyany8Sbpv8vvcsm4LcWYD+Z54HwnqQ\n/TLipEK0Zx+8wk+NpA7Z+xXNHV9fsDrlJykprk28XHYi/Q6EzkSa07g9QZqh\nHNWL9/XW7dqGK+rEujmxKAW5mWpTrkQkBc7re7tZffcN5r+7Hcraytjqjcry\npBphTjgefvrYP962CHjnhYWFjWwXtENmQYGTcXOrji7tZOPRwsCpkQjYHQMY\nCx6HTNupkO9k5b1M4kBMiD20dJcMgWN4W1xeDOgGHg/zRFKwUrobr4iycO57\nYohZ8uTqzcLcTq9SoTPnv8pDJh96wXXPKJAx7hI2EpCMA/kPRFlZt5llDwL4\nz2OHGXwP5d7xQvOyXpDmeX/n4cwJy6/xMasOdLhFyMWbsJgqpxOfam3p1hzK\n68uGl9dcGEAGyZ+l/MnQoqKcHf+YTt+8O6JkKCR/wGrJ7X0Z4N65db66OedQ\nszi7QKk+O3cuAGJkAvHG/DnmsGBGJXwdTu8D4t00tHUWQkUYVxbCMY1CkARq\nFsQX\r\n=PuXw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCt5dXUjw9FlLEKKncqMv/YvAnEgz65Jje8oivDR7iybwIhAJa5wQp0Phx4I1AYSCrigEh8SiU9VxUQGz/LSljrWF0U"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.e6b0816b.0_1596825793414_0.237819123251932"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96d15938.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.96d15938.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.96d15938.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"6e91207d87648ea038ff3d435537ba7b2014ec19","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.96d15938.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/xf1HEXK3+chc3aUgRQAv8VnB8n4wqNVJ3VpvtDRMChLUd3tZ0DPLa5GL8azcL69zdArtw5db5cSsn0S3oDnIw==","shasum":"34faa1e6fe0ae5fb814d2b5d402aec7a03240875","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.96d15938.0.tgz","fileCount":16,"unpackedSize":70647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLblmCRA9TVsSAnZWagAAVnMP/jtPS8yB3Clu4Yx5Ounm\nyibkN21f+NbP1cqYQ+wG02qiVTo7mIaLhoQtP5os5U/3Gt++WIVbtCXJh9Bg\nnQq3qhlK1wnjVR8LNygU0ZqQnt1PtXuFHbCNjRuFUo8Fj5jWnIwAy0SqFldB\nm6mn1I+h2r7S2tqKkLZMU0VeFEScgZ6RM67eIRJkGrkXXpEIxJlZS8wTHr0J\ncljwfZTAxMr9Ltw965IxgGA44FBHxzXONV/NVbOFjQqTr6jcOTOCR9aiOFNZ\nvk5rDMg0GLAVvYP0sZHq0bFKw5vmzRkOGswVwqxW99snxCd5hzvYoJseNqd6\nMrOarx6CeG4+Vk+U/oaBT+ZEypz6SVXT9f/y8tz6pkwtDa+gMSwLFvuT8PHR\nl6ZRCpUMBhuZBWRBHNMujU4njVOdtRZqDmILMq2DRtOPqybFg7H0ASEFu2mG\njc3+RDya6Ah1E2xXch1j2FLCX2Q9LrqRTz/CABBekIZtOJkfupL4Zbn0jejX\nqYSEcXPqu6Pkbn8+2f9PpAoT1gzQKCr+KsGEKyIa1/Mipk2MTj8sSj9ZAgrO\nB41yBgqwjJC4uVlPpXjJ2NHLCVg9/k5uoxaquWyoN9rhgpRMrUGkv8z76XVW\nrrHd+YnWVClg0J0/nap2ambNBXOvK40bplbWJPG/XR3HFxeT6EMwDvvPb77Q\nKEXs\r\n=Z5NV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAxE/6EuloC0vaU7tnGQW5lkj5DuNbhnAjSLRqSz5UsSAiEAroN9/WixpVQiyQEx05eV0YsMlwVvYZDmvdxdvWo7FsM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.96d15938.0_1596832102104_0.6757834794518989"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9d991c8c.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.9d991c8c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.9d991c8c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b96115b555701f0a2fb8299279aa9dfd1bf6b4b6","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.9d991c8c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nH2tfHpNrE54eebyvP4UWrYCCEceOtCpdgMyWMDFyQC7E4dS2JbEivMNFWGCvm1KJUP7yE3mj99poE9wKOMDbg==","shasum":"f95f9e5ebe0c5864852c72194b71d7374f2d3be8","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.9d991c8c.0.tgz","fileCount":16,"unpackedSize":70647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdDBCRA9TVsSAnZWagAAmbkP/2kZ+QI0jjn/ZZdq+Iu2\njYTggKsMSD+kk+oi32eqvVHpyCzJppuRpLmQu6n5MPJj2WZOedQYiU4aVpH5\nfYmRGTnQsTJh3FcDX2Up+yJAKL4NOIwbP+2Bec9TlGatw5BSuOyIpyUoBjO9\nlVK7muV+BNaLL8CYBErPWuT1WgimFxSbwTilAH9K04RgpKIJLcXFsdxvt94t\nd+515eP5DUHyUAleeVIbiRsn8/ywsnpvqdq4jXXG7s7hb8BLgRxS0z8TxupK\n32vsglULYQ+CTYcaevVq7xpPnucxIFblmDaqwAoV3FUECqWqnPey1Vq5oF15\nmDIcXNjUDzg2v0ThvOPs105+oSM/wIhGyL2y6I16u6ZCFl+Ayq9yrSQX+7QA\nhhMpnagU+uf54xwquRGrjigsZutpNPteTJGK3dVVfn9epqZTB8cKQIWqIj0A\nWjsVGQv9y0kzgel1GmMsjw1plRh0/RE/IvQUQBHft6Ok1bjgAA/4BemIeapW\nBXXgC2ij5rTbKqsZQ3yeHpnO1ij/kDO9a6mQZc5tmhgWWfkc7ryGbRG3rJIa\nZbLG18LnvNLuPHzFyJYSHo0zY+7+h0uvgXryd9hff2FMGyDska7zZEQSbY+h\nPO3Th3NjqvdovVwiwM2qS1dGslo42ujZC7LAQH6+9StchTtoACaZlw3AIuDE\njw3a\r\n=fvTc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDN+WTt3suw/uZQyksMsqpC2iQaULysbkiPuB5JxChZcQIhAKlyjziIermcOhltANbJAsEYnZSkopvMete4wIqvhcZC"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.9d991c8c.0_1596838080821_0.7356357688204065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.13bfbd72.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.13bfbd72.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.13bfbd72.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"801272b0ef15e1f90e0ba47c6a8d185052f8c48f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.13bfbd72.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-l2CwDRmkSPJwvvBBdBS2L0w+97DG8125+RsqnL/y7P+e4Ufru3swzqxccSuDjV65rGw8CriW/qiG7oU/U1l05w==","shasum":"51d3244b4070f802c9f326c44d578f2e31250fb1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.13bfbd72.0.tgz","fileCount":16,"unpackedSize":70647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMZ9/CRA9TVsSAnZWagAAGncP/0FdNrqtjxpeyvfEbmbL\n4NyZDv4MgTZM/FHV2uBgIAvruiA5nptzxOKsAx54UhwSDXir0I5XWZRPL/bF\n6aQa34IgXuey2e9GyDsilbPaDURDXI/p00Bhu1I13RbLFduSdaw+pcqAMxKX\nRBjAP5/jbTBaxHoATgn94pUQwBcUfIJM5RDxL6PsON23fd1VptxlNkhzZsI3\ng/3PlL9pPVSQzJzydJJA5mLEBieun1kdcO1/z6gnz8NJ0yjR5CclLOWtVPID\n/vLnCovsiU7IfMpsNty8J51zB63qH25LRwJfV6gvFcVyETzFHjjXirhdhM9q\n/A/GbflnULDJ7AHYQzW9JxRG/Abp078UAj+AWoYnZFWzpB1Kht2lhj0WvzKl\ntW0yk172Yyzr1FLCbOWn70xTUh1c3KuiY/2qxj6JLn1TfEyHzklBCeclpvJB\nXnJbDdqur4aZWJXRlTC32PE4Vh7vJWhIj+lB2P2YTyXU90lPtHUK1g8A7y6o\nplBUspjsxbEZi3hL2XSXZ1S8OU9T13R+3PWrUtZXNl7d+br+iUF6lv96b+Gy\nGVU5wExb2zGo+9ne0hsaRu1g7x6Zlel6kBKA1s1htgH4q5cB0qS4gmmjxIUL\nXH/1trgGHrpO7dGcrSpPpJTkUUnU6FnqdMQmr4uQdUF7jZjH7RUWcRTw2uEC\nOdbK\r\n=58bh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAMGo7YmSuW1MpPIiDuZvo6/nQ1jIpCiVdIFUPb8TpZ1AiAC98AescyMk17lz0YNYe1PWTtgoNA8lpJCTfxcojbErg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.13bfbd72.0_1597087614825_0.5664693347896201"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b1b258.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.30b1b258.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.30b1b258.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"e34fbf2f01b3504b83592cfdb8b30914bad24498","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.30b1b258.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6p6yoeZVGWys3GZbT+OeVCRlqdd3+4voLSoYCb+OC4OgxplqfsB1qCzqGR2sxzaz8+SvqM2DEfPyyx9hiBZ9ew==","shasum":"b22f5a42a29268b67bbb3e48f5a04a362d291cbe","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.30b1b258.0.tgz","fileCount":16,"unpackedSize":70647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMajACRA9TVsSAnZWagAA4U0P/ibmywdKdMgzwfijml4B\n/BPTlCueYOgbb7SKSbvHd1eFw8+rRw2RElsiBEqg0X/VzNzmVpn0DIbHC7HT\n9hQAcwqw/+K5jnkIvGfCLT6XV16d9fryDkdOp/S2v+2kCI4xZ5XJVh3cbz4m\ngCKR1P47zul22ffvXXdbcLVqvaa/rrIvlfSi3nD08mADGAH/nbrMciLBjZuK\nlRzYPn9tUUwwWUtXHX7FVFkbPS6r9i03fZQdE5bUVlwuOvQs1oE/laKJi24L\noCNVbCO3gR8fZIhTtx3+zFXuyfm8mFOgailSzKzfqBqA/xKi0OzyWypVj2wd\nKViusB9Uhs5isMT29kGoSYYv77Xq5eljE/zArEbYP3MM9vk9DMY3YMU7YWQp\n50Mi0cOpQ9GByczvFjuhYzmNjYnlzELi/EHIXlw4KRaz1awk0i/s3ytpqjYl\nSMHcZZzlOY9OJSd09snsuPivb0/0j8ZQFHKIOeXZXEO03Z0rcB3GlsFXloc9\nTaAwEO+gbXloqp+7nQ9oJiqhqTAm+OF+BXZMjh9/EwZzd4rCEvzEa2RWpFhs\nUtpksb2sRgT0bj+XVlVlDOkj9cI7rxzZOdC9XrmzCnvzdDPc7PUXsoTx9yDd\nvNTPiDsPj29G11PCxzyE23vFpf5QWJuHO6D29z+xjOEi0WJ0zdWJryO+4L8k\nPwU/\r\n=S0mU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHXcyFk+JX9ODRfMcytcaTOYTkHBRYclxqD2oVmG81WFAiEAnwdltzKM2tqb8NHERWFuyYpE9J4iU48wLpcI4pVa8hc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.30b1b258.0_1597089984309_0.6270238169510756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1583e263.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.1583e263.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1583e263.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"e9ee447b02f2731c33f126f2c3d32bc3f2808125","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.1583e263.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-dyJiwooxjxjLPuPTFo8aQPhWoyrm4XVFJhXQvCx0Dnd2j4w46afH/fofdhrnQLyqBoGTYdrUIpQo8puYTID/+g==","shasum":"da13e8fb33cadcd900155fdd183e6df6d966d23d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.1583e263.0.tgz","fileCount":16,"unpackedSize":70647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMyVXCRA9TVsSAnZWagAAXUwQAJa9mE88F8Rq7pYx+RIF\n34THk3GThoMfTr4W3uBkQeQhEkbJRET4BfcMH1m+n43zCcWgVQWeMkGqeQSd\ncUrzba+qzoOsOyjGMEFLpoH+pajmVi7yAQ6fAXwObCA9dEfymEgyJdsMoz/6\n8a6rADJxYvpfYqxgvQ0nby/U9WGKjF4EH3ru6ueMGdtdVW5JXYoNp3IRKPZq\nbG2bh9h26hFRfFFXXAzCC5FxaaH9OJe4erRJnOUHXT1TRoIc9YOYvnz2WWNj\nEONJn8h8Rl40w0D9RgZGkSLB9Wtp+7sUn4te7De7bR3R/lwjl85+JnSaXLwD\nDXESJ0aBs0CunYF+5eNy26IMJVWcQTdXUg6MM3QJ2lF1o1giHpwtjQKLA/mK\n7Nzn9TlmknDKmb/JalW2WlE7iejs+f23V8O252c7bxpLfWgkCUiyY0zYM0P9\nsx8hIgAql3xfhqXfun2IJENLh+8yRxrtK7kd6e+jl8f+M8cpsFjRktrvrQkV\niOFcL+RIjRmJplrmnz+nMA8645FeAuzoSTFS2hb9IzgHz2DuGz/3omo3IAIk\nW7LkOWFXP7gzH4Pqds1ZO4lP3mGlfcydmNYzR6ZaPGmoTtuIiRwb39nIbLBS\nXgHkKt4MmALagP1BIHFzkDnv7Co81PH7hIr5n374WF1wXIDP9HldQR0otADY\nMRbK\r\n=qdaf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAOw322xDxceWNmQDsj/gIt3uJ4z2MrzZ5zPcjEmMKU3AiBXLs8qlN0ZUoQal8f/Mwq4rl+qi+XSxNKIfL2X+LhENw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.1583e263.0_1597187414520_0.7143022244105266"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fefb1a93.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.fefb1a93.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.fefb1a93.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"328a8921a50cd0f162f89703f12a9e58406fd111","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.fefb1a93.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ukDFnh+/VIWPUSwueeNQrsBK9SdP2jLmWUo/liWDGLvzzW2Ej5ZZsG2vwK1Sl1RSewHrnM7e2pfg9w04j8KHUQ==","shasum":"7744b523f930328d26a13467f0f6943f1226dbdf","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.fefb1a93.0.tgz","fileCount":16,"unpackedSize":70647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMzbKCRA9TVsSAnZWagAAqeAP/0iRuRWjekelI1/5wvQp\n2b+w9sVzVh1sHBuPT21pFZLXgLb8vDvhhxNMgG58+QK8+e5wMNnNx10yyI5B\n8ZSpSUJqJuxTIKv5F/RE46Xe7ApDMfi3UIIcIm7DUA+RoSO0snkSycyhN4fM\niNWecnE8ghg9QfI/cYaB1XPmNTjtkapPjxgORI4Q4ZVHBBcS8nLXRIE9ByAp\neGWK6VQ2qbKQPhxBxocYUWVvVIUCQm3U/SjYKgswJIP7XmwDcTsY2t5eQxQh\nPE+VqtPjgy4xsf4WYFYx2wjG2OJ2Ag4dRVu8hCcnPx2yQur4HC50NBRZqVX/\ntyEc8ySDJgK4JdcFEN4qsOi19osKxKeobVCcq17cHGahDnZFxPjg6SmUwe5m\nDe0XVET3w4eaTqtTbvc5lwCv4bLxid5gqYVy5jsRwAnGxj6nGztkapawI78N\nukSFhTQBC3mxJWRuucDeYAjtc2Lh5KDVPIER1gdj8mE24w4/6cbKo1z9pnA4\n9Gz1BQGkplvnUrLbJzoAhNQ8UdN07S1nVZ1DQkc8Up3L8gIqrLvsGnkKTslA\n4cU/Mftg+VMfs/vtjtMxh4ZBuAixS4VvdveMTN24JPlae4WaEkzE1l2lOXD5\no5hIXAShSZ5tNfRJweczeghabyHX8GkXpUm9UTdpMAp2Nl0+giCNKl5KNbAF\nH9oq\r\n=w4DT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAGGAfA+IyvzU71Nx1ufFTf4Dusb/SRcyXzAWGT0xfJmAiAoxnFqWaUMr8RYRGUAOBKy6sn/8Dl5gUAGFbn2rID98A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.fefb1a93.0_1597191881604_0.25581238510158255"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1ac5b9d4.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.1ac5b9d4.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1ac5b9d4.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"33bc5db0b752b7e0d3710150fbb0449121619692","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.1ac5b9d4.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Cs8CcUv9YvoYxzFynccd86VsPsXR0KQelCFtFAe7gpN0aP3r937SGXSguLPzeQcqvqPb0GRuqAe1KRVuu+ENKw==","shasum":"891266956f6c122b9f803d38910986b7fc9b35db","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.1ac5b9d4.0.tgz","fileCount":16,"unpackedSize":70647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDRsCRA9TVsSAnZWagAASSkP/0AB5w8HWrdJFBAW3xV9\nc0/sI94W1tjVm7oK++al2ta6hKNOyE9YLtRMbj4v80j3vROMNJpnnTmXRfdY\nWVoj4rn/2Mc256Ceekb7BmqeAedINGJBq6QvGy0AcO/Yvg89zM1bAem1tM6i\nBMCZ0wiu1BilDYStkuTYCARBAjPVXT4iEF+FHCrtv3+gI0QBluWlCcf32yLN\n03g9VFMqTWE4p+9EUqXgL0R54+s9SQW1jc2HCPgs5Ewe1TdH8CvLHUWBWi9N\n69LMD6vBOu+frJM1LONHaGSnr45SG66aBMhyYKBRp6yMygXsC1iQGlZefxCL\npnWzL/En2gRJbAYdDK22/sIYIVG8eikOfazAhZZr3N7+JZcpNpuakqBwx+3f\nVYjE6Oq+RpvJN3kjOYnWCqGcrHYUHSV2dEX2ERqt/MlnWwH3JjnVErXg2Y+F\nt152U18UDlz6MTKs77N0o0X87E5390nZZLO0mqyyMoCstkigIjLan01CwivV\nH3qUuSum/UaKfZzW30hFfoWQDvSPbgHwMlI5xy/Zo5rdwvF2ls5WOQCjAk1y\ndA8SZ9sxZeJLHtZz5m0RqQdcu12f0CfPIUg7vSA/deZT8l7sPU5rhVtLkoBw\noVxzosfYloQLE9lvJm1P0v+K0Zn45RcHB2tY/c0wjXZwIqx12tG7i2So47Hx\nlplG\r\n=cgO9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBymbpYQrrYTP/X41QItOecjzgNLDvbWEZtxmQVbkMh4AiA9dFgBgxN+WTtHaHfexk3lA+q2Hv9xQsn3pG0lBWUsRg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.1ac5b9d4.0_1597256812072_0.11934336562747516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f17f5052.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.f17f5052.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.f17f5052.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"837a87ef49533f905c92ab0aa9faee12e51ea3da","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.f17f5052.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-VV8spldYu6ZJSsQtKpN250Gbv5BD6oqXL5lBqfWT6e3qKOBnoCdfxgudAneOu4qvi3fgC1ABV2czDFRLHNKv0g==","shasum":"54aba04ce291906216cc0c46297e60bce6fda6c9","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.f17f5052.0.tgz","fileCount":16,"unpackedSize":70647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXTcCRA9TVsSAnZWagAAabwQAIUvgIefZBeyPXrxg7+D\ncHVfR8vF7kfRxtl6ntEh2J4EdSldYlg6CD4vtKluOgBQb+JB//4hiSDm5WFw\nZWRXgm5/+gqqpjgiXoSyyPyTa7e/ZbQyJzR1YhVxzaTQdxhMdTAnBWVECnSz\nymeXsclNo9wFqprb+4UUwQQd0Qi050rfX1masLADkbRYmzSasHygPGJQ4oKl\nGVMbFB/4fAOfX1JLcow5ujssqnsWBO3b3cY1CjH5iLQLZfR0EvzULBoWKBu0\nvY4zJN8yADw4MvtuPOsxTsClm4XXzvpC/jI+3m3K0fYDOCvizQ2o6vHUZVTh\nD/41Kx7gjLRA6GLGjmAq3jQlvSfKZ1qnzD5IXk446VD9xNXOgDJ9ckEboZud\ne1chuJUtJ0YU5bmgvvDihfV7x7KPCrkW4oNQqtQcKIS9k6TdYROg4dz2kb5i\nITWixKe/4pguoC/NXCz01LXwz3G+EVoOhyaBtYfcph59yvYhAQYGwiW7ALCn\nl7Ks7ku/7I/vNd/GYm1a1cvguIojVLhi9zG5uuZveHqZM++om7p0oNzJKruP\nxvHd5gr1wHlzt9MdyMB9TWx44B/N1D+Fc3lDNETF3P9izIQc9LXreJYEFuvR\n6RhGG94wz5tyJ67nQhdJnQuLo0FHhm2geR0bPBD4h90Z2ExWca+0vVmmIsKZ\nKSsx\r\n=gofS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGkNJyxyMaDBepACRlYUGOjlXyeUx1m+InQs9Mt8osUzAiB0s6mUS6uUuYYAsjK/WKVXkXSIUBXWjhkqlfJs4D/aag=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.f17f5052.0_1597338844443_0.5649431267206335"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.80b5d20d.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.80b5d20d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.80b5d20d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"2183b66216f3cc82a57427b3aa805795f18e0925","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.80b5d20d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-94PB9nOIMIqQIuM2lz6kFAlGvAzzxrkqeuYQR4H0QMInQUKvbEq3pz48q2Q0IXuLsXGw7jMHcuWRJsViYjMQbg==","shasum":"d00acbfdb0026356bd25173ac5dd8a0ea364071b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.80b5d20d.0.tgz","fileCount":16,"unpackedSize":70647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNYOQCRA9TVsSAnZWagAAO9QP/3zwfDOKfwEW+OdyYyS5\ncoCiKkyJprVCczj0af04QdjnDUkhiOqPKeI9Cu4P9KBCQIHWaQyejuO/hBX6\ndbBSWu60Ot65dJt8KGHjgpOgr0yyqYZHlNAsa5d4R7rLDGIeAh0GzmPaSktG\n4rbqsAQAzks3dNuZgxw0TOzosvTqwwQJtCzBhR3oaYsIanJxhN6CNj74JNAu\nLhUbvXhuYnrio0sRHfN9SLklw9Zjx49vEBihNpLvdRErwN0HroXHDyHENDAg\nkY7TarpXY1mOERWPKGUXgOHTAxlEKgsZqHmecZDGL0oJ1tB4Ud7/9v28he9C\nOtBbCj8xOftXQDadPuPsAQBpo8FXBVE/E4mjx9rBmlpJ9d2dMkG2PQdkcRwk\nC0pXL+bcM8n24840V+u/yybhMXHS5IoNq+/i6ZpAHxtW1AOL3BLM74U3JLWk\n7J2WO/Cg8Sn+WH7agf9XiWd8iEki6escSr0C3O6l+FLCnlbafG+WJEDh+zy8\nNdzDW129IsftUlz95cLEsLQVJGkEMzqHJCrI9jN6ReB3gRYlgu6cMSxhQYFb\naGk7bdpozgigwNttHDn34L2zzyUtrjgYpT5Gt0PFbDCMYkZsH391vQ9sw6FK\n2gJXKkLtGfTPYpziJ7bAiLVE2LjPhA9HKzdCq4bJoJ+wqb+z6xjOlFRA4XMS\nQxv7\r\n=3EoS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdKCmdQHYcDZXEfXwy3fp3+czLn+m8joCUHubNPu+g7gIhAJImJHCsiQu105hxYh3UwojM1eX+YXBVM5XBMY08Mg0H"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.80b5d20d.0_1597342607963_0.6151378486251886"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.758635ed.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.758635ed.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.758635ed.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"dca431ba367368af1f858369557a0bc5db6783e2","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.758635ed.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-FgY5e270CL5xcFLMVMfPeWIMhHAYqLWDbfE5UtZwwfGwhWIDvrxvMKB/ulk8HSijhjs1KYZKrtM2TUN+EqmIBQ==","shasum":"3135a4bb296ed6cffb4d63b43fb8e8f7277aa6fc","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.758635ed.0.tgz","fileCount":16,"unpackedSize":70557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNsbVCRA9TVsSAnZWagAAXdMP/Ro5RzoXCsvAJr9clFTj\nxyTWu/SAjCwcg9K1zk4H6hcvtaSZkBunDvmd/Gs4M14X52X/AgEJ2P5G1y5c\nDuU5CmiVk9TK2ojqoDp8+RqZxdXKnL0wXm6G+e5eDapCtCLUeBsdVt1E//z3\nj7mO0ZNV5QwahxtKl16hyaOoFytKTqfpdUUcS1SY5nNDNvfxY/IDJo/ohBK5\n4QFWfCob1HZsLPAXIiTc08eiM+iaAvmguqCla1FDS74t1SVDcaqXtnvBm7To\nwEWCGLYyviVL49D5HtGKMygcf52dxBXOfouPfp6G+rki8K4Uj+5irtG6y3hv\nAKulEqujE7KrB91+XO9izZJMMjp1jQKYEKlIglYVsNwbubz5JGYLksh/j7EX\ntuX0Yit3gaHA3go41kPWe09UrRJtqx7sB1Zsd6t7VRmn2/j3X2P/8Gt+odW+\nq0jxjyOBQsArciIf3pONla5dsIx34FBStnUlb6b8JmXTPE5ldgLTK7kQi0Qy\n2zRBQgGJfPXGA3gtbA6IOzCAHyAt5RLtQCUrYwNTPbNz414AidLDHEaHlO0y\ntoO8rAnheTg90bqif/Sq8izfPeT3E3j29gqC2um1X6eMGfFsRWXgwbOgvw6L\n2bU8U8g0Ekx08cAjqIUQsuF/buyRca8hhKd+Q1md8dBZmZrJXxuUWA0xLxLG\nka1p\r\n=cAzI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICzLIXeJUZdXKg8N0zgt3/p42BT+xqgp6t1io/L+AZy6AiEAx6hzPKlv8JuFYFwG3PPmqcrRQC6MJsAPrX5BJ7B9Leg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.758635ed.0_1597425365412_0.851084576990947"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.18d6b808.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.18d6b808.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.18d6b808.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"7eb789f1eb17355bf97652cfec031e407c9e2fc4","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.18d6b808.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ud6cAFCnm/mv5irMVyBp4lNkgWKuKVD1nAfbdqesEsad8l5P06iTscaxCr7QkQsYK+Spdv0BdHnUbMQyMV6D4A==","shasum":"752467eebb7b4839fd1fbf494d2cd7cf6d381858","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.18d6b808.0.tgz","fileCount":16,"unpackedSize":70557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxk5CRA9TVsSAnZWagAAY2YP/2tZg+JDHoR5mGtlS1K/\nM6FgcPLG5UYoJgsnY2xDQ2lkyCEYoeNOpDeMtr8iZ6BvsfsI6k+xlv8f/kpu\nvdlAiur+4fLFM7ft7X/3VjGlscKJkZZ7yumRZxXzDQN9IDS1sDScNyABxDqw\naTyMeIBd8IScKTbSMOhECZXh/8YfN2JmNM1GiSkAugXrtmQ5oa3YqxKEI/io\ntRX3BPOTJxxeBaaDX1UkvtNYv/wfxeOD/DNLDiLIRxWKIYrENmiTVmAfIRSJ\nGwayxMU3ZMCzQS3AomknbZXultoUgwSOOKyX+rv+LFT0fM7dPbB8PZFECYVJ\ndSwSdacU66dZh/HawZxiBUcC45EKgyLq97/hFk9XMiIGezwTvdCoj76i64Zj\naHQrA6sMuLEQdPXyvwczxDOL9YGuamcgv3vFUj+XayTCel+GVcywxkp0UuhY\nDtyOXJ3n4syP9z65ZAT1aMUza+5EHNZQ0Kke8zxJK7mqWJ6fYAhP6t/5u5ee\nWXVSy1dmQsdYUyBAW9Ute+BMgVe4XjB2v68WH3zkwlPFDNxLiPJP3Y9VsSfU\nI8NpATqfzknM4BcBnqREJAxY9LaIl9Mlodr4EJqJR6XK+I4O6bpHh28RiS/4\nJRVXAWbivm2vYnEBamVvPzOp1FnT+ss9RtJNS75UtydGo8ao7eu3JZO3GA0f\nRMeV\r\n=EBFl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAkP7KpfsGVO4EnW+wpHLx2vgSu4FdRd4SVy9YI921HKAiAk5AtOkMk0IRevFuNP8zkYYe6OKfAIE56U6SwbG626kA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.18d6b808.0_1597446456944_0.2931101141625312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5f8ffbd1.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.5f8ffbd1.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.5f8ffbd1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"c230db638d0171f7a47ff1f312ecc123b9bea4e3","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.5f8ffbd1.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-1231xII+CvCtvAdGzAdzNfO+Fg5lP8a5JyBqdtaaMYbS5C4itY1p1NID5+YZ4WdrA9r9wriEu6uik7wcuC4naw==","shasum":"f21868a9d43ed962020413332d0c5424613b99db","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.5f8ffbd1.0.tgz","fileCount":16,"unpackedSize":70557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwFlCRA9TVsSAnZWagAAUZsP/1oejICA1UsQQ6Zhdz9e\nbDrba6BJgZSiucaUFBbkRcmWYMsF0BjYS8VjoH3zOyNGaql5eyvvCjRD5UEl\nMuNhQGeEI5ay0wE9uLlpPCjb8Mxw/jZlUR/PRLmKojh2J54Yc98J/ZH/Cdwj\nUdsmXzos7G3xCfchAKLKXqtzJv4GjJ/mt1NqGsmIWFh6DdUv7bEZBZiDWBNh\n8+xvMBtx54WlA9DgNMszt04UCzzRbUEPG7Z3De1AX4dR4WKkgevLPr2cAl6p\nBSRHAmOab/0FBF33HZ0SegzBbK6btrPUnXRzz00TF+zFI/lvsORvuXyiZmdZ\nVLo/qknCzzsL8ywG/D9QxZ+vq6KMzTpcUJPgkVtv8blCJXHv2YqXLdpYDzby\nRVSljHC63FvLo08HTh6KiBikxdvOmERccgAPpeuJZNFufUFglyJVMmzHSn2Z\nqGXfa0HjfomPSjw/J+SAnH+ApeBqIXjZFHgKy7Ir69Au2a+XKpXM3qJMU9kX\nkLFEqQ2hG0d+9U2w3V9+E0cNymsxb4PQ7t0EwoRgQKYD/C8AYEJ6TkY13PKo\npUeQB1HE+cPNhsbkfZFgXimukc1CILZFLUcFjIhNshRj8F25dCXAcSia35gs\ng+zmXzy/AFbOnoCJnKdSMvZggVaXEyrNJcdkJBzBLjKUffHuGiE77eobQDPI\nkLhp\r\n=crXf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCreNzHrzLv61iWVVYVaNSnZ1OVgUs5fy3iAl2sNvg05gIgINGZqu9/uhB95oKxz2NIfRiqm7dXC2AgKkYBXAlOxBo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.5f8ffbd1.0_1597702500674_0.9531547462460219"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.8604d59e.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.8604d59e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.8604d59e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"6b87d240089846147032623e302121a478088f7e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.8604d59e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-LaQkKM0RoaqZl4QkIaLbfSIujqWQE6JeTt3geOM7SDLVpJgqxXfpfDh5u/PoJQJc6axePejC3vTvCN8A2QaZPw==","shasum":"af20404c0108b96b05ed3ed168c2d99d4498cb45","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.8604d59e.0.tgz","fileCount":16,"unpackedSize":70545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyh8CRA9TVsSAnZWagAALUIP/2oII1sT2VTRjhDQmqqP\nuqE25pQ8ggJgHkUURVh9xCgGm5x8puqSvYYCHiIycFBapgzdiY1MhlUJlyD3\n+x94VjZ1Ak8CFTXEEOIyKHwakV49IGmIpjRccwcKp0qLFxTrrq50Hu9v8t62\ndzfwnPwF9WZuouALDuZm/pGax7Us3DbzGoOoAxDxGWPR36IjvHG4Gj/p7I5H\nnVoYPVeOhfKTkEb9edG6iBAzn3lkWgTlMx0/nbX95AREHvP4XW8T1KOKsEoH\ncJlOAn57T4GH9/6RWfQj3g6w+IxbEeADRaasZsBgcoFBA8OOB6rDYv5KSSXQ\npZbGUeV5PREHcaneNoLPX7i6i4NfKaeEm8duMjUOOUqxKJSHcxbQN7ni363u\nhoc3lju7cM5bF1Cwr75dYc/XDQxxE0Oz6mc3boU3PlLxMYGUb91yzp9gDsyb\nAhXd1LMElD8/2/VQLfa8l06GEeMwZbP1cvcGC/gTrHG7QgsHuIKMdIX3iagK\n/kvHI/CoPJUKGRLsSXvuAx9rpUNf2DTT26bh1Gkv9LjAkD5XXvArYIw6sXzM\nM+MMgYb7KjexVbar0KV0jw9IaakWR0dMhfEjWtDN6IRBnxhUaMEQjO2OYDjS\nLwcHltrBe+KOX2N3cu9FM22LEGx7ZIHJlFuIOiNKqOhHWgDRvijwBsvLj3G2\nGO7/\r\n=TY4a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvm5VTzcBfHDK35fN8sO04XR+LFzdU3FDqcj9zKiCOGwIhAPo/6lnR/gONkzBIiGEHUe9M+rb7qO/EK2iNpxrp3b0s"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.8604d59e.0_1597712508317_0.8470791326056484"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1d7d5e34.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.1d7d5e34.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.1d7d5e34.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"e5b1904570278e726a75457dd1d8c9a30c98669d","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.1d7d5e34.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-8t76SuiIbUhLJf1guUbns4J3mPfS2vAuByhvBnfqdaEWRMEnDWkv5zAjVA9G6NyGvCmWkJFVHfhc2CfPLyo8ng==","shasum":"aaa230dc939d0c1e4442f2a8659083045a39acde","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.1d7d5e34.0.tgz","fileCount":16,"unpackedSize":70545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyoQCRA9TVsSAnZWagAAxwYP/2+dd+CqlmmhY50tbIT9\nVxSE1Gl/1VNE+us+5V8xuHsjHZ1yWFYdCUFhoN6DYV9ckp7yLfKAU8rtekpx\n2Mi/iHg3vFFh/9AwyELXM3G3LfMqOSJUrc8xHr2t0l/9wiaQL5pUnEuobQsV\n799ciJCioWCRac0Ce2sYspe1iEkyYgwPw1UgeYLtt9rpttRTPhKyub2Pm8fd\nkhzQ03t0bpKnspQjXIZsHp8QysQUmuRFf8zMTAZHlYNeYeyRia8ltinUp88O\n3s76KAOq0DDybNQKDZ8vGPz9gEa/ecFR1Z68RaAM89JKiQfsFT6buzONBe0y\ndwHSvAGd86Q4altSXsqR+WCrqeC5O+B4Nf3QFdjupdrLA3qM4adnOoEaSspz\n8iDZSy14dnY7aw5rtuMSCn2adjZDE9pqgQXjf5F8do0ndAdakQKXzqrjfK5L\nC0xI23kdCReItc1bx3MY0rAMdPlG30D0P3OBeNZYu4F3drCnSUlx6ls9Sh9h\nms1buChoKFrkBOsY71HlSUXbFikeq5LBcM94mNv7noTpAMvwKREw0yRXvCWx\noYNmvn/CH+0SztY70lkS3kHTSmn7uyMbk9PToQiLFO0YKzMUeY7VotteyZuH\nUyrBQuSZQr2fzFwLAfLPCuILrfq9XPCDLpZnv7UChV/0+gjs4jGboGi18YTg\nslmG\r\n=Im0R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD35quZiE8sS5JlZY9CXpbsCUOAuqs6Zm0uZuPq4smyoAIgbbXkxVNo8mjJWxE2PRQ9Lbc/9XrhPF6DV97iRLqKtDI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.1d7d5e34.0_1597712912281_0.6973344779131616"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9cc95c07.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.9cc95c07.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9cc95c07.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"48f9adf6b09d7b2532669f3bb466d2dbc3970990","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.9cc95c07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-BxzWXjo7OFbWYQurFQzAVG/qLw0g12C9SDmSBDxxbAccq8yd2FyK60lIq6Tfo99DaR1WvuLuUSNEnKIvsXPuOg==","shasum":"3a1bdc2f14981584fac111201adc13e921fc50db","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.9cc95c07.0.tgz","fileCount":16,"unpackedSize":70545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyvWCRA9TVsSAnZWagAAIx4QAJzUo3fFCzUPf4EhcNul\nLclG2TcTGT9oLGccHSS7qwrZId9TehbIwuqo7/HlLD/Bo5lHUtddmWsOkere\nEyesMwe/jnMawoMignUJ3foXnZmocws17wKMAav24k8nM6tsmFs8SIc0GkaV\nBDlxHblvFKmEwXMfWpFRxiRZuCWpsf7rp+Y8+S4RoTqHmOO683QASdbYep31\n2Y7OCxSRFGk0XYS+SPIyEQYMQ8V4z9tcVk0w1ZGZJgLZwnmvsQAF/c1bGdL3\nfuQoGFR5lTPv9JqbVZPkndP1H76AhQq1wnSp0ImzU9KbhPPb8wYVOGKmzXkr\nPmsAP/8lrwYAmz4+/eEPXKdB31kB5FPQcvOYcAye3Wz2e3uBd87eAlLhrWZc\nQVg29Grd/QgPg3BgCfqBuCbEBHcZu6dzH4+WyT5awYCdwmy8rgnwcNleaIN8\nAFytIYVrAOJ/Ea7tHEXshcE5lMa+1OoLIfLjXzgPCFfDgxZ9p3Mr4aBrUwyP\nNXPjMZi/8ZaFnxo6f9zReonCo7QzcWm6QuDcKf6SyQj03wqGdPjXAjRG63Tp\nlxDINWLGHejTjZYdFM3LT7GihTbYttRa1KF81FP1RCDg30MjQQTkLrZ2Vf3r\n9XW97FOo1Sxb7EN1kFokT2rqZj9AnTWCaq2lw4Oy1IvgTAAMvex87crs1ZzT\nbxXr\r\n=snLS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6NLKhpsl4gmyPpAmsYTuQ+cR/mGfWixPYD2MxdGFZYgIgc0GYRJALSLJxBUWV3mbfATnHOWj/EMipKtx2X1a2yXc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.9cc95c07.0_1597713366418_0.16537376507891555"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9f65ced3.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.9f65ced3.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9f65ced3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"5aed2922c67f2ad7133772e74310e121b406dec1","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.9f65ced3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-BBA/hQ7O7kz+R/vcfas1VXAE77YuczZfkFFF2+EP5QMYx7jZcd71BXXNcOfIKdPcEVJTadbPZElfAxrsQDuQXg==","shasum":"35c596c5e7503b865d30836841e4ea3f097cbf15","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.9f65ced3.0.tgz","fileCount":16,"unpackedSize":70545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPDbnCRA9TVsSAnZWagAAqQUQAJlrfFjHFZgpE7qtggZ+\nN4yxsCs0rE1TvZXfnnNcScEBmtRgC7CoHrbRVco1EcDgojt4bxEWCKOL0o53\nPCB7BI/n8FQFYZ9S70pffI67WJjnd1pWU+wHLL3bfEmaI23P8Y/I5CaOJe0p\nqP0JZDJsu57oy2OochUj3HyOEwQhGaj6YD0h9MmLjWM3erbO0tD+cOyMwIZV\nkfWUC7ngQ0t//d7XxByxNXjoONNuQFH2i1UegMBWDZ9M3BOFUjoySDZxyHNF\nMhNs5gG4rJikO49JCpU66ROCbnrzFQBwzl4kWM3y4t/3KfWnSzuqtSohRIEO\nwnc6xnTaWNRuakbJrBRuJJ5nMLukoFsOwp4bmnso5Y6fHnU7heSfrZvwNUIv\nUwZo974lumQSlJgaM3m6OjFj1CzsTMs/8VL4aWBBCwh8Tlm6urSzwWv2gFkP\nE8/eYMm/1ORFtp624OE4RCB2VMochs4aO1mEpLmsbHR1yX2KvcFT0pOmkX3J\n9WEHYPVvH9nMo+mgOhO8DIx3gy4XZB+FL/rSbmKEhyffG3+8O8KWxqgjES83\nEvYOrXAnG0e36gIEC8/E4ueYrh4y1ppL+tm2EKm3qY3CxB0UUwJnKX/qb6Wo\naYf0DvBozNhpDiJh8nSb9MU//3eQ//OP0imiPrGpJX5TsdcYcE4DdKaDIZwR\nCwTN\r\n=gCTa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCvgzZiuOALdrHMSR2n12bx4CLka4IJKEHMXMCXxDChQIhAPjDID3nOv01oY1AbqG1ulWuGjOyJTLGdilAqYLHazB8"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.9f65ced3.0_1597781735340_0.5345994261371776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5962b365.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.5962b365.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.66b8ed7e6.0","@material/mwc-base":"0.19.0-canary.5962b365.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"gitHead":"454d30885df0a3162dac8184409307ee571c6215","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.5962b365.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ILaKQl3jCdPMchnTPWJG4HCcB0yPZvQavnUc6XAnJvHXtNlkdzSvtHIsUQ2Q/pqbDihyo82k3G1/5druddLTlA==","shasum":"eaacf1434ef7f9d82712452ff08cf5feb6d4be97","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.5962b365.0.tgz","fileCount":16,"unpackedSize":71085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPYtfCRA9TVsSAnZWagAAOugP/RakOSlPp6XDd1qH8GVv\nRUYJ6sLIgn95br1+OKfII4PAxHRNNN1U91RoCj4Y1/KXTqAg34XuBo0jk6i/\nOvFAauTBmGD6JuUSA3SOryA6m9EQ5nJ4w8qmBzCOGjnAAxU3AyqnBhSdkwAf\nvz5QJKo6CV9OOtyU4BOc6dD7+a5g/MJY6ijk87JNvdhbu/VUqtk0uieI0e9W\n2bf3t9yqY9fyoCwhX70WcnX+TIMXY2xnSdFk+lsbXatGaUsP9z1gx+COs5XB\nhSN8l64cnQg257/jkONxQs5qIj8FJXqmyBvnrZLaEZeEHwxuEghmwPlROfJU\n/R+eFoLj0uzQpU2HI7ZHLrHR9jNRBD6J/Zfv6VBuo5QQvsqivlsinaaBlqg8\nnAfjWW1Z7g0N7cD5F5hOgV+zeyQGEixpXXFyHNvse0JZf1IyzGjnKqGXHwYz\n+jqpRbYqb8+Ke6NES1KFmhkD43npyZxfaOvmL81ziJOGtt+6Gue2qnMBkCzM\nlRi5Lwu6YmJs4T9o7GHFsy/HH8voSk30lNvDd4hyLo4+b9bAoREjIYApyffu\nBNrSE2FWF1o6DVxn9KpU6XFBn7bEiRPBervaPPpDeirnA3Iq1rap8jD75hP+\njIGKhIHu9ZJ+L2Q7J8iqwpCxTvqIDObnc2o0Nxng0ygqguY8wnnntvaPHOQc\nlBbv\r\n=uyvV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlaPt8Ps8zxYn2ITyxDrhO2PmzJDCFpClzMGtDpZWA5AIgRdLV9sutViXrxSeLDXsOHRgc1/P500p/d0iBEhw7qzw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.5962b365.0_1597868895010_0.6027918939744574"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c9ec756.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.9c9ec756.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.9c9ec756.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"4c887788f2cb30e8b788a5cb0a1a13dcb78a0961","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.9c9ec756.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-mQNK94GEtAAnfO/08Jpmz+5nzdpvKtpTcyvpl+IyfupFcicin7mzsnbV14iihwh+hHMm+qrmI4XxI7XHUgIQFA==","shasum":"61e6da6d611e3f5f18a0517bfed8edbb7318d521","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.9c9ec756.0.tgz","fileCount":16,"unpackedSize":71085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsccCRA9TVsSAnZWagAApyQP/08BC6Kpnys8/Jz+dWMM\nBq3bOFdvA+W2RZfcyzBg0WbIfGb5LYjyJWAi409yE84L7QYO9fOY/I/6y+bJ\n0udxVcxOiOov9hURXXJvED9eGHBZrj+6EVTiiiBAOyLF0s2fTcIwPcGAi3GN\n7yHRr3dM3Okdqh1AbfGBkeWUYpFJNox83+NfkT+pT02d0hX4hWqCaEiVRmEL\nklgcDup0MeeD6SaOGOPKwimI39nzXECDg/LA9GbXuHiZLo9sVFXhVDbXQpoG\nugA+l8tAZ8PddWJxaZBJVpYn8/oeEoaS0ucb9uiVSEdpAa2i1bGK4eBV/NSh\nIdJPJtpCvpIW7aZaLbz32Eqp6FDrW/GUxs1RHeE3B4/aMn/zsWT6S2sqbI41\n9D6xNegWaf8m74IPqwdjM30zRTCp+xP99kPdOmToMefLogoZrdKgHrpVjku8\nm1qyArUpT3XVvO3gtrRt5mOM3qj3i+T18wWtZiEUqmysJR3ZpRotYGTmdoNv\n9JKtstwLKPYphSbmOx3lccNqBlTV+kQq1JiDyiBG07U+OVO5N7wrfwXSKWw4\nMndLSN0GSUDQcTEJzl9OSdYjMDKGBxqDKANLz3Cr07q97xwmskV9D2SiIuPN\nByZBNKAeLwihJziSQ+D1CCIID+Qu7/8Hvpv+kjIo3da1z5WgkIQOGTiih1KQ\naZ+y\r\n=RcDt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDD7IXNEHU1tJaTueI6FKscGBejkjNYd0dVGj389GSYlAiAULueY4miutzYXPj4XtHMfd/ZLIMep67EVKlZTRmwx/Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.9c9ec756.0_1597949724295_0.7679070237133312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fa0ad66a.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.fa0ad66a.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.fa0ad66a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"d4020241262a9309827adc8467ba4c499bfab71f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.fa0ad66a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Udxb9xU1YrVhbP7w49cW65MCNRDN5xu8nah9IDO4JluSoeN5aZEG1D+u5TjiBpFvw7adm+geZ4/YVagG28B2Qg==","shasum":"9dbc8a7fe3d06ddcbadffad595ee5275c37b01d4","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.fa0ad66a.0.tgz","fileCount":16,"unpackedSize":71085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt5ZCRA9TVsSAnZWagAAAgwP/jA1kjqpRJEwrmx+p05z\n+c+Gl09pPBrDEXExzua/mrlRfR9jYvqC4N3/in3ag9/sVo5I6OIVY02e4MGE\ntTTnUFcST/6U6C/CFAstqm4VTRtzi2IO7MlPKMH1j482n5Lr80ksA+dvyVqL\nUvh29vsEeTH5XKOL2K9MRDiBnIOwr1lLrQHf0vVHpZA8LwEbLE8R3KEY1BjT\nFo3t9UXea2meNzcWwxVmZ+31AIDWYJuTodMdDmWqW10R6PDxlTLFbA6sBm5l\nIraIZ+81LBPouwVfr4qqzZhv9UF3f/4BIFF1g/hSm0Oh6iLMsEOofS7GUR5d\nlq8/lMm8sETdy9b69gGW7qHpwzXsHtf7AHCN9iI+h8kPet5q6eph0+cW3Px4\nMRXLNglEePuhkopL6NUv2kF5oJnovTQab/67XkPFqgRoXZQXlqTZOk+nv6ZW\nNpi7257zViPQwo2TaQEAM21+VzHlcjuo49T3G2Ej49rwbhX03mO2oS/f8/d7\ndf6xG+G9xSyiSeCTkSZhjHpdBHvCBVCj9f0+lZIbXC4YB9TOPiYTfXIXJ3yA\nn4Wf6a/w/EmAXRJLOo6NhaoZl/y7MK+VXn7qwXpgad7ym5EAztt3bQbxQZ6k\nKvOUSWzM/wz9Jf+I7mQ2/D3DxchecLcTFy7PSTfwk+q1htnw/36gV/J4dWGO\nlMar\r\n=78DQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9lR6s4iU74PtkrhzbU1RfqObQosJroND0SIshNhstPQIhAMcwESdfR6/k6rpvu/MewX2Gr7+n99J0SRtgvojlmqoa"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.fa0ad66a.0_1597955672655_0.8266111668537033"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06ecdd6b.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.06ecdd6b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.06ecdd6b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"35a2331f3c8450d35506d4f0b54075d121a2670a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.06ecdd6b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-UUYGZMEb13g9bJ69HIuXcWRimBIbx9PEkwT31RqAXogv7oH8s3ivMXhYvmhfjIpGjoc9wOzeal6jq2ncetFGJQ==","shasum":"7cc8e5299d111d940f614ec52cb33ab42fd627e5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.06ecdd6b.0.tgz","fileCount":16,"unpackedSize":71085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuwrCRA9TVsSAnZWagAAX+sQAIXhrV3MtSSExiKrJc9n\nNUUwJaKQT6nwwYynM9qqloqfzgzUiHtdxFLExvax/DZ/JHtaRySnKVB4xMTi\nrRKqS3OBvHv6KvCOhWYolGVZKqx0B3gGaK2xVBM6KLnh8Pam2p0ClBCmUPfs\nzoENx50tBdjebDziJ//IjOX13xg9H70/pVT3tk6BluvOKiEcE/gR3sVFN2fO\n8yY/Bqh5VMuHhXjmpfDz02GKmbrw3ibkzDlAddntDc6LmZ4fSVz+yl03EgO+\npLnTDVW1EteOAu/UjX1j1Bkc9wOh8aaG7BPEFlLi9ZgjbA3B3AqSPoeCsWeQ\ndXiPZ04wDBAlBXCyqr7qWn0pXgxG4GnOJhhZl0hJ/MSbcQE49vMiPmSzxFH7\nkC5g1ABMxf+8Sd6ORAPdxcwVVG0KW2oJLOASFHnP0rDCdRSi5iPvqLhYxO6F\nbUUDIgTkUDfTHevwJhLB4JXxtBZGGcWohsZuz56By/ttCmikZHMEPgnXkOYM\nU0oyvLuGSHEVmb6tm/E36Syu5nGO4JqgDk2A64pW5DxqiGyomu/gOAREWm2N\nKZy/UVvN495lDDM36Gbm8G3N2Nb6Zs4Erx461FKUF20Vl9tnuygvhQ0433FN\nquhA2sQwzp0hhBMluDdTNKyLDskH/wHj/5YrmFU0U2+c7zXuxvssdCGpfIOC\n7L64\r\n=is+I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHvAJZNaKZaOLrAWZmh+PKZy78J1WGiSdFNFEjvvNK6TAiEA644bnK2qgyIiEWJeD8i0NTUNYe/2zaJWUXcid7AUj1w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.06ecdd6b.0_1597959211020_0.7382906951812807"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.2bca2318.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.2bca2318.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.2bca2318.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"2e3f0ca806ce8930df2251177b8dcedb9deaa8d7","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.2bca2318.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bzVamr5O2/cqT8QtzPKVJGFOk3zBnZGiuv+RCSpulspcggzjLemEnD/00ZAm8zbL5V+tSP3Xif2IgaW20R0i4g==","shasum":"84760236fc24acc88f080776daca347a2b5dea3a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.2bca2318.0.tgz","fileCount":16,"unpackedSize":71085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQAm8CRA9TVsSAnZWagAA0a8P/1tO5C4rRGiQaCcQRlNf\n9bd4c8PdxL56dQOb2QPDeDGmmtvZq6MROTNLwNmeCwe4tXrF37YzzlRQeFgL\nCced4acjWkya77WbE5tj68Tiz4qobLJaB15S6g2lCp3EdoZ11qvUaNSJQP8/\nqfPBPRN6Vdo/GOhQRb0KWb4PMOM2D2r01VcApnrYijpVZgv8E1UMWuc3FHyp\niDRE+AZbkzRf62H+ay0dWn0Ay+cPrTlkY6r75SlDqJowT6dMwfLfPr2UBkhT\nT5sXb2COuC6A6maOBLhhulrRR+wQH61vTF5fx5EG8Q53c4PlQjyJOSGXjBoE\nNogzx4yTr+3q6IRTjWRwJUCYxXnCZeOLEWigbgHKIsBnu1CrqvDAKM3UQbDf\nREOWE7ohg6qMEdzNtIgYnrsfZcYfqb35FnuAtY413wV4Vl43FVhdYv6TFlpZ\nrOKr+rUy3LVbA1AvZ6HQFRQBjT42ZVpLltY7uR6GVnbe4zrzGHmr4N07rihM\nI99v6E1y2eObWQLA+Mr+av0vSvQ2ywMj5FOqEUgYCttXiJ4XTyuDaOoEdYtA\n8nCRu8ge95jOq/q8TmyCu9xJGS3/g+55byccJ+XbNKi1732LV9Zppiaa1X/K\nyBe91q/b1jz+2IXKLqh5wUz1FiFkmzC0r38zBRWI6SFiD4piW0g/9fnYu+Ym\n1sQo\r\n=R2y3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3oLVhV7IkA8QY+x6lpCERstxF66qo32CX5CwaOkaINAIhANyVPsoB/tUyMgg1r2lupTCF9uTH/4UAsCJJBC1OAVpP"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.2bca2318.0_1598032315632_0.7896675681432428"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6aa47265.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.6aa47265.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.6aa47265.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"f13aa269065b757dd289dd89367756db80da1596","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.6aa47265.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Eyd7zrgM4w32q+WI4wGQ6iu3hbolkfXxA1a966moy7onUSlFilmmZNQiPeIhfQI2r41Mh3nw/rbA6iSr7GJIag==","shasum":"4b0bcdb3740b053fae67308210d13ed84352dc90","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.6aa47265.0.tgz","fileCount":16,"unpackedSize":71085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA9LCRA9TVsSAnZWagAA8D4P/2bQfqSMdWWjRt925nRK\ncTYChrqKLAS3UFJs3YX9cVaI/ENvKQKLwQJJVpeNVW3jqCktHxIiBIsLXQFg\nHzUn7IUOB2CTLr5keYquHXk/my58pZHO85U5VV+a+v4Px9+wuTiz7VtJVAp6\n/EYYNvmQHrqMRAYMzsgJ01YY0YDqHwpsoxt3eMoROXGHzzgpzSjIeU0eEV5h\nBDIFyvufrjq7LK8iaIEFaFWpHZLvaJNiASyZMlGiAPtUmFpUOoTAK3B2FT+U\nayslhIalMlmU9JRz+fHokAZj0qqdUJN3w0qMNmMcDQ6e85xTfAsAATMeEI46\n6pll/0dx6UEREicvkjKB5VnwoJgE+FKAMA17ZZkDtBtPSF7M5xxhurxvc/jl\ngFykM4egmR0P1bDC9oc00WGAHisISojaBXZty4/cFbbPol6ncnqUiLq7NH7v\nnSDwG6bDwx5oq3JHji+qWnP9MSgvxcn4CsnoJy7Mvz/ZfxrFScy7zDNqy7yt\naQ+zjiiOMICNvZkYDqibI8TTsf5behVmxK4+nWSKxmc1Evm1+xswMLxrnhZk\nDIhYCIwF/kZPY6YW83R4WN9qkj2rk2JvkLGABjySQ5xQgFzmjffHL+z4+oRw\nsyQ8VU0VL9nh1zJQsjI1SSoiVmUUG6MaFegYkegCHuXbzymmsCrcpZK0fpmk\nGokC\r\n=VdBx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICRlXk0kRuwSlYxCp6fvONXxUOMW3Vcd9ozALtIPHbskAiEAuC1sswCAjF348Qi8bwJidkb5u5c5ASj86B3autNgZOs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.6aa47265.0_1598033738613_0.8256847146699762"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e7202a07.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.e7202a07.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.e7202a07.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.e7202a07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-wFvdyyU7BBrbz0ets6k4nht187x9l7U/Cifwy8MhXHuw2Zx/fLKbgxFS6ZS7Xfow2UXYblx0THonXXh+et0wQw==","shasum":"4095c820c86f29f5a8885177494b07790a86defe","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.e7202a07.0.tgz","fileCount":16,"unpackedSize":71085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQB8YCRA9TVsSAnZWagAAXZQP/iV4rJ/vKLjqcr0AkLCV\nOkTwRaMcGaoAvMJw04SIzO1wYXLB3rTVV9M4nvG3K4MUYB62K67xwQXsoXaY\nEf8CgjDlT+mfrdf+S/7dsaOv8nn8AEWIgf68lAFLo35yzYiwlMLimYSSC8Ps\n0RjpvtRT2pxiEGtr4OhOuRZlm3vNDWx5V80pghq36ehqO6jqscZjVEGgcVGI\nu/QkpjdUCmrq9lu24U+5v4HtbyUxYqzRyn+ikd0nzbWLoQw1oOVtRfXnDZal\nHQ0rKTdhH3wgz5l50B/OJKQNuAoWzjqeQ5fDl4qCHyQxSXvJvEnaEC5PYu2s\nfKQMpclTUGOOiBvRuZzipgaIl2SzEACQr7Y4a8NrdGu1N62VgE6mf3wkFR0y\nhmPmGdhadFmYWztPcLmQuEmY32TnsuGq/H4cYB0T4viDoaMDklubd0hddlOp\nGez2q/Sw/c9yeX4bHI7X82fVSB9t14sR72Q7etC/VqMA8UGtbPKeJKdrP3+u\nhX0JcJqd0XWS83U7OtcgCbDc0wLaYtCUatWQaDNc5/TeYfQadMuWI+jKghD/\nDRatdNYaPC052jKQliwjz9tlmQM1KCLvbPo1ToAdZQIDTJSpP/mSFyXKMRvM\n3b0U9dkKaWB6LVk4e/wIKcBwRSLMR9HCCHRp/piy5YQD8/9IW4XNYhR98ick\ntxgv\r\n=egFd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGF5SJpSa4GYiVBMlJnvTmafF5tJd77HRecQrbi/KPSCAiEAxyruMuazNyeGSxsfV2ZPNAkEoWgCjJri9Zakwq4N/Uw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.e7202a07.0_1598037783741_0.8877882748089998"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f208201e.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.f208201e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.f208201e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"c666b3346918d8521008d20fa3c20b4cfe3ee481","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.f208201e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-55CgjSdDa8TDqbUxk5VpPpwQvVnLw1yaKbTIN/N6W1A2QWje4sweFXGYvDet/R7YKjkgXKyAuQENeeHQEJCf7Q==","shasum":"e2982e1410aa498c2281107f02d4ee066f7dabb1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.f208201e.0.tgz","fileCount":16,"unpackedSize":71085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRA7UCRA9TVsSAnZWagAAjCkP/3s/PAscG3uFsuqKj/+1\n1jfoKFiMb4Te3CVLLtqgIRK3wgnDSDJ0nb88k08LBXiqKlrp8BlZ3ud42+I+\nQyGOpB4ldKED5N2h39uMKl7jLfwnuIfPeMuLqwvlMw74vXn0L+ACw77Fg59E\nWcI/iCAra8FMRjEIHQxfhPmMxPL7sikT6uAaNaBcDl1dyutAQRrnMWRzuhve\n5fJCGxUa1IPdnue+XvoG/iAqOk/x6KfyEc8BBKaFsJsmof674AjlJnu7ORMp\nUV6hXk0EzBFHrYxTVuTIoxg++9/JvLgHF2Nldth1JuVx1uAP5ur3NYzsMThT\nrfx2Rumsv0qokuXat22xY77QK+jtD6zLZkJ06QZIxM+a4vky4DWP1dbFrJ27\nUTOlNTIOBmXNY72zVRqa5Z85NUgn3F+He43hVTnm5VYXLgGv01JdTkyOAqfM\nHJ3G2WIKL5nRGeMzBQ26VycOtQIIpvNf1hNpCzeirZepXYBcezaYZRAFbWv7\n4LzDqYJI7Qxbrw15UZEFjQHriPra7IjhrlXYDsIfCbDSzUznlriXzdM4HUFt\nP1WKdG61sr0Gi1srwn4+5kBr9xrJMkbQruYNBAEfv0UZ84XYyVjIx/83TiS+\nq5ot+PfWGc9Y7fMcLFiyxZJpgjmgnNiPzKRjKrgFwtIXDJyAKcK3aQ3p2bbC\ngMfl\r\n=zIJo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBJE9DmR8/7k/Z53dGZI79gZ6i7rsUzchQhxHwMqzUL9AiAJURyBT9etO+6j0TNwLeBbwMZSxc30hUqam0TFfKNpLQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.f208201e.0_1598295763813_0.17722867586364632"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.14a172db.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.14a172db.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.14a172db.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"dae488440593f3d8bdddcbf01a3a6b5343d88761","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.14a172db.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-imCPDBR3j0GJB6wOsIf9CwMAKcK4Rm8f2HFaz5bDoCFehF/mSmT9oNsfQYkEyKYgXCnkL3DzheeLmhFmatiLYQ==","shasum":"84e58bbf38045821d6b51059898ce4010f496357","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.14a172db.0.tgz","fileCount":16,"unpackedSize":71085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWrFCRA9TVsSAnZWagAAz/sP/A5gMODHu7HbftGrNlK6\n9/LnuT5LHegrwnCxLjTuYUXhIiF2aRSTSVUHLKu5SA6NAmX4L6tbmqA6bOoz\nS+/ANt6RTFLPie+FswM4wmONkUWEb1GmTaZT645Rco1BmGGKLLSA2U2/xhPS\n7ICS7ArCT2P+hqIp8pX7hnV85mbztLk1nEPOTqqRciGwzn1qoVyjfqIivKuE\nEIpNuBJaA5Rt2t/GyAIzVDXH4lsd0Y8n2PkZ7BXtluRCsTI0mYWOsivCQqxK\nixdc5PEbrXGHj4OcN/nAlaDpGxKAyVEPAhWlT3K1DFkvZGf2ACiz33o/RRpW\nova2vkJPT+yQXLdR7/x99eLmOJ6yceIaJ9OdpLPMFIlShQsutA+CUoFfDNuL\nr2SF4Gh1N2tJ1qU8C3yQJqkL2bAR3hLcinu6O7vXYPOebPzKEnnjiO5eEYz1\nMzUECXslQ59Xx1nucxnn46cmiN9HXdoXM1GroEleF3BT2wXBjQ++yYS+gDDE\nqWnqF58NzQUc9fKpa4ccPZh8Iig00ENHtkqw7AftwOqgQclKARfAx/niUHzL\nVGmqyCd7PCJk7ajxj+XXcdrN+/5l+BhK6/ifrSowktwbEjF6vASpZTBxrQjb\nD+yjti6D0vJG74CtYcVCkaDkgY9ulF6zeYeWKfVaHIH63jUf/8JYvoOjPucy\nBCHr\r\n=zQ6d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAbI9bSOyVCiEWWo3kgHlRuSZ+UkloajsUovlfFRReGAIhAJSnnR9FPJ8T81qEDaLgQy/HBWMZ09TWXb4nozQQkG8U"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.14a172db.0_1598384836574_0.9890922801284578"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6c1038d.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.e6c1038d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.a1c65593d.0","@material/mwc-base":"0.19.0-canary.e6c1038d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"gitHead":"6629a242b77f90688959f5a54abc55be3a2dae2a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.e6c1038d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-GJJbgWptxaPFOxN/YCUHC6BM9h3fwLbHnV4BMj+Eq86U740DE0Pc/vJWN+qLMNJgm/70t/vMlr3KleS93V5o/w==","shasum":"c9d782b4306a8140a45dc486ec8c18eb729410aa","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.e6c1038d.0.tgz","fileCount":16,"unpackedSize":71085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAtCCRA9TVsSAnZWagAAt7wP/0PMZJW5hY6rt2rEvzgH\ngyoqmmK5VrBwh0ta0YbyfDdjJdIfP6Tz6FN+DFr2AfBSe7AYMtu33v5phygH\n2hj/pUm4fa8rhkB+n8uJbY7DdRqFr04mAbi9OFy0yZtLd3/Di3NVOnXCz24A\n19dDm+ps3OpW2FDtIjiNNiC8bINyh1yL0jBi305ZObCPAoU7I2jyu5MmbeAY\nhE1B4x8tMGjCKu3kc6kIdA9NPJMevvRnP3HGZkIamCMrCDGWbCblyHrxSfqj\nyUwSIEL+/4/TKONdjzHkWZ8TC2beH/vD8bzbH7GLjk44w1upcXn5C30SJAyl\nAWoJ94In0Kn2pkR1awrKZL9O4JzuihSI3qzClNQEdBWMqsjNPVLWT6tU+nQV\nY8V0A6o6zMv1oiJuMNqEf2N2Wrcwq32lNh991j7C7EKksQVCHTyZGESPXChj\nF/dqmMEsv9EYpju8AwCsP3g9cXo20s+RC2K1PeTfix+CvQOzTJYos7SMttwR\nIX45gfochG0pOMZ495fj/n9LQo7R3AdKEYtGB2XxQ98XO13Yjsp9xu6Z3MVh\nVHQwy5Pe1tBsqPcFtNSxYD1E4CsHkiMbe/Gfu+gb9j709d3y8PDrVkULQEZh\nGf0Mm7DcsbBpMS1PQuEgm437WGCyJrglLBTMw5dfnZWavp9pQ2hqWWUm0368\nRzkW\r\n=bSLE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFDcQe8AcWcCq8xb+34Z2Ud6QtG27DEuFW8Nd7wEiOweAiEAkI4xdXqI7knNP25L6KTwPXIxOb7ciKA3v5HmDJMBZmY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.e6c1038d.0_1598556993976_0.3343649332817116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.34012082.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.34012082.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.34012082.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.34012082.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-aNw8Gm5EIqmbAXBSPfbRLctePNex6NNr+50cq2/Gw5feFk2ffpdnKxVuSyIYJbjn64Jj+SFRPp2vNLqMGYAkCg==","shasum":"70df58f9d05673549015e4944e438f4cae9c2810","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.34012082.0.tgz","fileCount":16,"unpackedSize":71085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSA3aCRA9TVsSAnZWagAAwr0QAJc1yh9j04oRab/Eb4cD\nsEEB87n9/3Ys5mGHRHAwgkIR0AguhyE8hqNd6NuS6fBeNmyGePdKv0SGHAcg\nwNOllWjmiMQ6w8LH64ZckQ12iyjvyKu8ePToW7kDMJWRgQUu2pvaD5zP3+Xg\n5U1mmI00zLWQ8BYsENBrngCSIQ5gRsXNIfGlRIrFbPK55tpLuLLC8EE6A95Z\nn0V5hELN+uRtW6rUfUQqcY1HbPmOEn+A56CHaEx6nt6sji+uHcA6cxxjHzy8\nq+61I+J/PGso/jErBSpu0VMzt1Mmq52NPZ+XF1nvqEekpYtxitScLjrsxHMq\nlkWZaYcjjG63EXS0yBPP/+A7U9dInQzYakRnUxuW004wgsAbGx0TXkkEm1vV\nnM0EgLzfRfyac0xtQVKM/4hdE7X3+C3Rkp//UpaAP7SJ6RdozZAKS19IBWDt\nAxLMla5VIXBlqUzCQ6BzSqnnJ0GzOtCaXN/A+BEAVvIPpsCQF5tSrGFJmYcW\n85OS9jHBScP240EnmZkl4Mgfmakq2zxthd7BQeyMFeQt0rugU/yonze9Ov6q\nNvA+7xd3slcnvpO/uAlGZ93jcmft5zeCZU3HV5cO4T0i4NXlW74n0ozfGv1I\n2V9JTdI49nuPXwOkce/swA4mRrbNc4HzQT+oMxWLIsgz43jtCpPy7vP0usP7\nWk/e\r\n=o8tQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2QV45eaXbUMDogiLwJ1SM20Qy9dNRcMJNjVcuP6CPdwIgGJKfEQ902L3p0JyNJ8p18tGWylFr6tVMIqqjUk3ju2g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.34012082.0_1598557657646_0.8594654118912548"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c073f7b8.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.c073f7b8.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.c073f7b8.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e16d759d8a3de4908c04fd08603483dbc37b1747","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.c073f7b8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nxRZuwcORfORW8V72Mh489KzWA+dAXnbl80F1wJrUSdrkxaKsBfouyNrwdkoT9zUb8sCLQQNjeVHaR1j6qVG+A==","shasum":"2c5edb16678d4f5c5a0468192ec27d1374b90e33","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.c073f7b8.0.tgz","fileCount":16,"unpackedSize":71085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSTrRCRA9TVsSAnZWagAAQd4QAITluapN2jQq3LnGrVuB\nMzZ9C6ec+1UudIjXVSsxPYQolX2qiWIGPwuCPrFCK+p5oOV6F6t8+4hJszj8\nfu66SSQ4nBK5TL4xEy7FKwQgxZasu4M+pPB2pHYOE2lhhxQMQly9HibG8Zai\nKvUZ+dsxVnT065VkO7yJlKKpNkFb58+dsRg344818GO/Vl5BaPhQQS0mTWe0\nZYCBw6yM+JBsNO6mD4I+NaLxUCM36ozfu7CWxcBj+nPZOOJdCdLEdhhEmLxv\nthQgwK42ChUSPCs7vi46YPaXC6BEVp99/zZHEIVB2KQbeUusPBLMbHA59+p3\nqcxuOrmr9pr56bRpjY0SBS491I4a3JEvrRC7pdtIqlumApMiA3+KZj4Mrzo6\nJO2EYd2d9m8chlOAvxMGn+ZpmIKXxChq4Lr1KL3yjUC/cvkecmtd7YaqyaHS\nugU42LMrNlPwpghYigE3rNeats/kd67AptKDllpXNXx0lZG1EeqD7LeG0YTc\nlVYdRaFY+JB+3+2nmWVnENuqf32CSPGpyAm9VqUqiNyJuXAH60GmYkyIWxcX\n28Tx1vwS13QcQlxgonA9DUM2LP3dkQGBxMQTCjW3ssSsh9GD8ZfZRvECaV/u\nWFE+qu7S5P+oRIPBsodC7YFFN6LHiiR65Dmc+ff2pc15F76JEhhdW8tabGMp\nbjsa\r\n=1moF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQF78ceh7j2v+LJRKBM4HALqrc+dhyRniFDZ9sD5dMTQIgTTmHlFuRfpxThDJvrXaVUHkibHRIWYLIs1E3mdlDM3g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.c073f7b8.0_1598634705206_0.1973163570318135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7ae68ff.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.b7ae68ff.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b7ae68ff.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"2065ba1bc7a6ad7aa6a2c0404136a31018fba984","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.b7ae68ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-N69gU01JLoib503LK5Mf6mgIi3YyzBIsyoKcxutAvpzNfc5GVhNn/tiASahYU+YGHQpyNj+7QwYO2ajvY+8JjQ==","shasum":"8d611c042f325af7b7b6a53baeeed1eafc920bc8","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.b7ae68ff.0.tgz","fileCount":13,"unpackedSize":55902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSa7PCRA9TVsSAnZWagAALN8QAIsp44pYb0cZUpvGKg36\nmYAySB1uNePdag1XQsxh18wqtDi6WQmMYJodsGR9y0wKUhGd8xZ7n1iiXlJ7\n3lGqmZn1V1F80jSNZdff8/apRdz+vzlXM4A7z8/gQ+uodhCcSWFGF1CXrCzl\nsLg7H92fCVsxM0lvx85JjnTopL4Nq9svRNEvEhvJ1JQ5UF+OGcnXZ9MXYSsS\nhE5i6e6a/oZ6vPmUEJs1kkH3m1ihdjhgP4imL61Ah+VfYgh36ClOAX0wszMS\nZb+HHsjKrcwFy1JlSAP83ogz+sXPwbWSITtJSj1+LW4TzLHpCIJo4xyKly3J\ncyEVEoGGucbRccv+pkqj76B9csAmLpvdUpT2UbxLWB1o6X26sG/0fYx75hb0\nrZxBhfqvHamusQcK2Ykfyi08CqII6UY4fnguUggOpmAqkyPHaqMFE39/Dl/c\nVcZUEiA3314pGYpyz9DDNhjzpOJXuixL2Y+Y0kZb7zul+7LlT7tzqjrfpM8K\nzPVbKv6ub8QQ7XVTRwP6z5mzFsl7Ab1NaW11WU1G/o+LL09vgPzzq43MeKTc\n9OpAcXf7kjxNiaGPs6xaBftzKz0rArhTiUiHM6bSwuIZbTVXrszB5JfWuMTr\ns3bV9C9LOuVqeIEQOqex7q4/VQFMuyeYauEL8CHH6ajW9nloGfdXdubblHRk\nTgfQ\r\n=GNv0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCO1vxLvZuXJ7MBV1llB3lfrltMsqbomveDrw0C2ONfSwIgeeT5kxFVdj6jflCuEwd/xTFM6sXWoSU21q4uwyIvmIM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.b7ae68ff.0_1598664399178_0.26457920353549036"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.697e3879.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.697e3879.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.697e3879.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"beb4a106ec95684b6ccc8c4af64c083d8462c917","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.697e3879.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Z9bdpomG/TFWuyUNZt/wBzkDTwEH66xkjakz+6VwsbNngXxnUdPMNPIbNIc4GaNpIBIyPMo/qyt9mcwgp2BSBQ==","shasum":"d392af0d635ca20ee567017db3751da65cd9b308","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.697e3879.0.tgz","fileCount":13,"unpackedSize":55902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTuNzCRA9TVsSAnZWagAA8JYP/2DXRGUlEOw08pO4tyo2\nLdD4GK++JRRv/EfeSIlv+bPZfNKKnqCF0bG95WYa/tSlR8sDzHl7pDmsy/nn\nTwroflYjRp6s8WtOdGyQ9OUPV5wlYmhFzM7rvPI21x1cyIdNw56H0lgSlP7S\nmn0MyUF6mzWE7YfVOr9emLUK73gIcOJEbYnl5TJF4O2d+nkHCS5jLjmEEWp8\nQFogy7Jw5+g66rRCS8ON52iCQrRBGSnsEov1b17LZC34QH/wHM23xKCHO5MH\nIe7bqO34iQJJBU5grZ59Hf+013ynsNHkAZnFHkZa9QAhh4Nodvo+mXc2sM5+\nZLoIDtpDWBt4paU56JhCIgUGbeZBMl46te1rMtW0MfmP/0nFtCdOOntB37VU\ngQvd6J8k0KGMIbi41r4fOAthLutYkhiiyfbpOLq5xFqJHFiW+PqKQ+4q/Uem\nT57eofwv8xoitHSHEaFpBE9wXcI0RPSJI/bRY9MsE+pjjUlLJEDm5bd/nKEy\n4PyX2K9tD3ji51iydOL5l2tSsG/Ztrwn/H5m/+2tpqyfQ+y5Iapl91UPlvgh\npKCagfTSivbgCQIrKm/0NJkDIdkI/u2rxgcIcIlVpDU2dFkf2tqw0UuZBw/h\nkIby8gCGKoAM/5rfb2xQ6O4WN4930fNYeDQhrZqmm2QLqkeryNt9qBReffJJ\nZMko\r\n=CUo6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbiJ06AbUW9+F3/unxu6VfEdNEpQmmpashM4mTlUrKsAIhAJTm/vn+j9O1dW5VzUA0izYyYk74f/ryko59x+ewEn55"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.697e3879.0_1599005555363_0.025183746495770265"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.eafb7991.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.eafb7991.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.eafb7991.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"98841f8d9a2c624210fc6f0bdb87082222279e38","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.eafb7991.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-pOgkCvktahh88LAW1u64LDENnSoeUH52tQYoqLWXsUPhq18kc7x1GpSiZf5nIBs3rjlgjuLdm4ZWrFCTzSmJeQ==","shasum":"ea640d40a755c6a3bfb8c04972463634f997a6b1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.eafb7991.0.tgz","fileCount":13,"unpackedSize":55902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTwDKCRA9TVsSAnZWagAAI+kP/i0MG9YkqBvxMRnWYQcR\nK131Ju80G0An5JzUnb+cx2YVEDy4aUqwaOR2BJzDksykD6jvz/IbcFk78znK\nrIppgZsT2DUVZrcBgYyydcaMiCxiuvfaEH87zmocBd3kM+0AOJXBrF6wZdJZ\nkP3XsxPf6kkgHaq+9GiKLL+W82hqvg7nyX1tVuadVjkAXwDPotvE5576rVPo\naPuj+nnZTzrhZ9DSm40uArmYMXaOw/efA6g6LikY8Gdd9xtDf+MiEcyrrxLr\n6w8Stj0KhiL+4YCIO2H9tB81gwkYzWZ5i3RPPtq9KkkxP9IgIe5xZLSpG3fp\nUMe5/Tkp6WhaXE/S1SlCwAQDkMLHL12pnNMTsbTP8d5954JFShfCu5zsbyVL\ncyVZiylW3CZ8Fgi4PRKwZdXLAXLWMTOTt+WjpV/K61NFPo+SaXz9twcSX6D/\n/r2x4zx41Bk/dH1lvKZA6xQKx+xM3Yzv70XvDdh4q7Dr/R6tV3AAWDmn7gZ1\nZ89jXS0FmfuXn9k6NMZntqgvHaRUG4WuHVrPFYmA5ZS9GwZHUEIBw9edZmAh\nI/Kh8RUTYxJ6Z6u035bf58AWETuCPqlDDIngWaNSuIIgChVyyagBtWtvvtIT\nMRTfYey608Lce9g52FfOr1maGgoEmfAy0f9L0NLrRz3hOueHMW9juOcyhozu\niP1B\r\n=TWkw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAVrgfDIP8RhHNbbmDDg/qxteHelmg0gl0ductlDFBKgIgYEbj5XuqFrjrCdVdRm3qnIkXVvdZgy9eeTnOU9s8uqM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.eafb7991.0_1599013066477_0.01819590311404129"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.606642ec.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.606642ec.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.606642ec.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e02eff9a35c3b9c054d88cd2c45d44ac7d81db14","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.606642ec.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-LJObvlHwmSfDYViVRDGZvPp7MemyKYHhXhf61aIsBRuNRumffTJMpF/gLwMHyAuxEKa2ur72FfqjCN+qOOMjNQ==","shasum":"978b629b436d1dbdf6100ded73ae5eb8b523cfbf","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.606642ec.0.tgz","fileCount":13,"unpackedSize":56451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBAHCRA9TVsSAnZWagAAsyIP/AkOhLTxNvoMtZc4wuam\n/jg6tyyVsvj4UgVjgfFvbBrejccRcizb6r8eDCFhPE/qtZJaKyoqvWudrGzz\n7lHmtkYQF73jFCnXFANFT/XDqqrpIEFmUg7qCD8cfcz+h1MRKUwdI++pDvs4\n1YbE5jOzIOFoEC4ccVxXYwMHC5c6iKSzpmuSpNenFp6N8Ikn4xBb26EFzRzu\nrnrxNqFSrKOfFX1xYHR27w2BFHce1YwYIdL//Fiw+GrpnjYxiZEEKj5bjJ4E\nf80jB93p5AoUdTra4DaLlIkblR6o/ndmuNrDVkcJ5bEsWtf2Ow4pN8ifnEp7\nQU0gn8fg5Rjl+c4k/xujquOokmiFg0MAYYDobFxU3nAo0SyWb19NELU5ytmM\nnbYDBz0WOXVmfS5/TCiDH/dqJE6y8izLHO0T+xtZYmCyt+NjAAZz5XKILXeW\ncZX6KXzJZU3+T6gt083dkXwDE5+OlYy50T56L68aG+jRU3n2C9a1cxZRaVcn\nzRxsdR7SNb5Kb3SWFl04hzuIelDelzS2XHpPYNqzQ2EF2hHOC1XP9A6dqNpy\n1uLc12SQiTcA/e506LBB9aaR3vKzSKX0LFBCmfbnTdrYQ/KwU672mlYyMoY8\nrCOporx40l5dP9o8b1K4zE0MKf1yL0FRt9vm4lRi8rVco8zQwrKhKsbJ4g4K\nM5x4\r\n=B5FA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDF1F9jSWi0JLMyh1O3lql0Gh9Bjwj5+wHo1GHBHXiL4wIhALWQPitSwu8uDI5f6b9DckZqek0hbw//gSDE7lrMOJ2O"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.606642ec.0_1599082502745_0.8435914239718458"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ddf05c42.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.ddf05c42.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.ddf05c42.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"1733e660bd96fac32b417696613437f27b2841e8","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.ddf05c42.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-KXMRR+CzEHLYoqdqK+wuG6uuu/81T34R8glTzxDoDw7Kssi9aCR6hOkXPt2Q5HivIHU7OPGgqK1E4C/mUKjFSg==","shasum":"9588dc9e459409e5c565b39546d7310dba8485fd","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.ddf05c42.0.tgz","fileCount":13,"unpackedSize":56451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPUkCRA9TVsSAnZWagAA0o0QAJawab6CoGQ6V7LFzGg8\nN/pVKTm1mTgcAhWHqvVHreNgve23CAIpyhUC8j0GQT4ZArPuOJaNRDsDBcaq\ntnQv7QihHD/zloXgq+zr6Ifhkl5HgBnmLiCqFxP0Jy54CzfwdRI+CiPEJ6nF\no2ELOACvsXLGieuSStbKpT607ZZg6GS2Olt53yJwgQ8yKhKaIKWVJzPau7SJ\nNvzZNVfFcFS6B9sMcDfXi346vvIU+m0GGSV0q7y+mYJ6899xZDWqYyxUSqPc\nhZtj0BKzCW3T6JbbYpqEAhTdmQuZLC2wrHTrHp4HeLRIm8+oGu34tsTAOle5\n0b72PdRAmNAXYmLduKi/PSkIaF775+NaVFEQmiX92KyOi9Gp/IhgDU8LJZgR\nSBuIT+Ev9F/E2AME9Hkyzl9+IGVT3yRRDMjOp38pNirMv0BGqwYLdwCBE+l1\n9Q2rt5PtUTG+9bWqxSbSaaJ6zpdLXcAole5sSSq3FIhMumRQ+WHiZHNQPCiB\nz4Ag+IXpOL4/9mk/ZFkZQXIXR5iof0GL+W7JBYjYzAoweeJd8RO0gGUICKpm\ngJrZeZFlTfLNCpjL8T8wNvFyniRkKetMWLtvTimW4cuZdngmmmh8opllRnNb\nVRok1ciPRyQuVxZJt6YfWopVuvAmt8v2mgQVtSUyYD4X0Lm1V2TaVc1uRiAa\nTuho\r\n=ketY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCr8XUqsPK/NoCdOYPx/CwWa8sOsUXU6pzR50kMUb3i/gIhAOKInuI613FwafQ1E7Zk51qeV4Ou0rGfngVuX4SwHu6C"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.ddf05c42.0_1599141155669_0.3525458818919682"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b889e6dc.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.b889e6dc.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b889e6dc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"9c47011345ccf89ec21a35053b80a0901ab1d6f3","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.b889e6dc.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-c7t1xKUrIAHg5WbrT64eDWXxR5mM8vYLhGSCb+8QqBMuZakN6aIoNm1VxD12QMi9wLFuwPkPKQyhTJjxzfkivQ==","shasum":"e94c7e7007eef1c35af2a5864ce4b99e41139990","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.b889e6dc.0.tgz","fileCount":13,"unpackedSize":56451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPlhCRA9TVsSAnZWagAADtkP/3vERSetwwyuXv8j3I9w\n/B6O013y7EenW5pyZWCRbK032c+t4VqDRzoPGVFwl1hwkEznYAXYuj8d4V5j\nqjQmIJp1Ylbbrr3TBmBc0p3H4rKfwz8eD2p5tld5lUdLlGTeB0um/VNHUum4\nyTcHU8tHa+DDdCB0K3+1CHfRPPfeRwrlO96AbymA3/OFSAgrhRLzPd4Fatgz\nRMeGg9TQa/cVdumngTuvSm7TTmUvaMQEtWpCQF+00VhdWf4RjgxmYZrHaHVA\n+cEELQCucaI+IJ9yNoyIpQocsrzhsq5rupb3B9Ntf6jdHMsoxeODlWGsUvym\n7RrVYVOOOQ0Dzf3WSoUwsWujA6FD7DF398WnBa211NFf9QafIj7B4cLfY+mE\nnWlvqYm+yaw1QbNj4qRNveSr+SkfAaxxXfDee4G1MHijICC0rKVDYZxoCUbL\nStRhbmDMfxrZnXzu9nQmo7f7uzWh3bnRYkQq5hqFW3vQnmEUd0v/Eg2IDplY\nJ5Wz1DHOHNWZzqMDCouRrnV4lNN96JmpsFNH+afXw4n+FLiSwVZ6f5ZG2pZa\n2ne2X7TzFjh4evCn/AE9pe+yZmpXNnCbnIInI2LnvYg80WPZ36MYJ0bZwxkl\n8Ea1A7f+C6F3x/1sgNIdy6IBGv5BPO5LE6tgpINioyR8ECNXCk1FONL8iQV8\nBHB8\r\n=0zVa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHHyGjWH+5dbqN95c9O0eMaaYTS0DgGbiJwt+t8aJerCAiABzJhpJbmU8CCLVv4a6rpGnXvNmKsoxo74XtYcA5qyAg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.b889e6dc.0_1599142241185_0.33197891447949823"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aabeceb0.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.aabeceb0.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.aabeceb0.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"f699717c41dd2fd6f77fc62da010cecb621e6991","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.aabeceb0.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-1pa7s+nQSrm832SBMLtx9DCogRcdIF/b4OUURxmZIN6tPBqDYPb+GyiYmpLJiv+k701duXgAQR3cQEXZElRduQ==","shasum":"e01cb525ddac1c4ff6dcf88914a234b9c4d9bf12","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.aabeceb0.0.tgz","fileCount":13,"unpackedSize":56451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUqNCRA9TVsSAnZWagAATNsP/R0jmmimm0iXoNQHAC0r\nAVX4eGNFa8qeD8kV0i438O7k8rZ153j30ZZ4k6yEVZx+rsld3+Yp6nuPH1od\naLnLQA8DoFXTb6zJ+LHxh5RPM86i+gHGxfsdMryM1IQcWvDaTpC8bEwrV0J4\nQxAMxw+KXt4SEiYHzXFRXNGPS3f7caushGgYniJTP+4+vI2nUewmXUr13n5i\n4mzed2W1yNCEQNMNlh7Q5cxxqmIuiYilAIjLdtPBUw/Udr0ZiFq/FRg0UL2c\n1NW6gg1cINzoVZnNZxFNk6aZ/ZBMQvIezZsfKwPHFht4/PkJ0py0ZrPyw9F+\nJlYW311/F8aJljGNNSPQQzaa90uvDqxyETrgCXPeS7hFDgNl01EEoHr8Vetl\nhdwFewSyfTM/0+DXSe8UlQU6J1erXoIK4gSwIUJJtOq9q5exAyyqOXWB/etT\n8sOFQBJKq+wG6lqxKmBNncX8EAU1R6HP+7TQbsHjN0hDKN43I/Y6Ku+kV1TJ\niKCqBDyrYtQJVAuUTfZQqLTsSdv6OmggjZYx2lnweLUcej08dR5jrLe9m3AM\nvz+zbyu2U5n+DWEMzkeEGDd+GQKEGpU1qGPpRCw2/TBkgBU9l3os871HMXOh\nFwVjly2AkJNRzVib1ILCkx1tbz0NZqyZhtB+wLJta9I75fGOTJY46mJUz1FZ\nnLdw\r\n=jRzf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqWJVusKD8tKSK6AWmomxrTIiJYP7ZLCQHC5CBPYkh+AIgKJFkMyjyn58ajead3G06upZobz4SBb/Gu6wxaEOu19Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.aabeceb0.0_1599163021352_0.37988515936604594"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.d8cca3a6.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.d8cca3a6.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.d8cca3a6.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"db99eec046a418490ab66f7fa667607aefc5b26c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.d8cca3a6.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Be2++K9exJBr4YoDtft4bS3ZcUkdXaev4Rz9NRfJDkpbFMxpIlYkzIfHMbXENh7PRN9Y4uMW/eTYo3IkiCTCAw==","shasum":"621ce42fa91add6c29cb310b21d749f78ae4f555","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.d8cca3a6.0.tgz","fileCount":13,"unpackedSize":56451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWCWCRA9TVsSAnZWagAA8ukP/1cE+yoD9Oz2WIQ6kfzn\nX+k9Mp6KZSMpVUVv6Xu9VhZ3S4MkqrKsExkrhUqBkEVf69TLWPt/fJGi24uV\n0iVdehfUppRIUlvKzF/rpreIDE1T3B1V7ETz/KE79MWhexEw7xO44K3ub8ik\nHaBztyDeMHd8yvRoe24ClkUzhYxvdZJjHuG8oSbCoqLlzIoTZwW/FGSZGML9\nG0PpPNCys28/7KSeRQSDbSCogtLre5uCAC4/qjJIvZxt6qpKaqTKwMTiJjCr\njn0Mtow8boCyv4PEGoqZcEfEtRFIaMWfu+CSVrpZAHMXOgsOj4TXvrSj86vn\n4Bzj4jyfOPww+FHzu4CcvEeAUFoYDwcvq0wTIy7zvjINJb77FRgpkr5Pv97x\nAQSjOYjPQJcjauO6/HL/uGA8ZhZmvAvnR6LFrMLqR5igHIXswUAYi2HuiAjY\nQVnyjkKAB1Qa46Qy1NDix1wCdTut71SiuwGlDD5CiD20wL+s5MsqdxjV0Nqw\n58oG7A5l6HZu3L+/MN5fGh5gW2jXwkTGeb/8JSePtiMxmdlEhRJ6J7tEN88W\nCMhySAEEGCArgKfh77Oc5YNS0VrrxaMEjHn+ZO3YauCbdhF6rdY+2SYkieyv\nxNtLBT/Wi8bcqz7iuotmD7vx/sCJsXc6bj6pEFQEUuw9kfJipRCaEgzEpxQJ\nQeK1\r\n=bmHe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFB/wMHjQRtzfwuGwZe5OI8vbgjW6XyOHFW68+RMc+dWAiEA5HrNUDGZRkuLVkOuqP1lEhXX83Es780Hk3nQl3DXTRM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.d8cca3a6.0_1599168661693_0.1590581997701992"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.26d34b2e.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.26d34b2e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.26d34b2e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"52bb6b8fb277d5ec6b66932a0683e4f2fdeac872","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.26d34b2e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-JTCuPrAI4yvRNYJLr6FK6AEKvSjWGRN9kX+UcPm5I0i0YSrlnkXhZw8HMw0CyLdU0mND/7HVH2Pk0Q8evVR6Vg==","shasum":"ae22c22dc97904ae6eb76638e4484558b456c778","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.26d34b2e.0.tgz","fileCount":13,"unpackedSize":56451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWaGCRA9TVsSAnZWagAAzQsP/125t2EmVr6/lRsUF1gj\nSPJmLaMCpfp+xWtnpYPJBuAsrdgEByMu7l597sza4JjdP5yzOytt7+RRzUAQ\nFK1HKmNP5oyNe2ocq9v2onZkkDxgnbXyW3vLT8+u6GPVnH9tSk6r04l5kANL\nXNuO2mAeNMMQ2bn8EmjTQMzeEOCgJbbtIsSCjuK6NJXa9VerkL2p+2/IRCbj\nOWywvqsOOjTytciMXulQjxON/brv1PC7JqMcrcleDRbNhrmM12kn6sbwxGUC\nfJtGkh7w2oVYWbWGR2JstlkOoP106KwkLH7bPVbRbMvyfoN80HRQM6rsZRq9\nScn2Hs0GTCMNLgj9QWTBPc1GXvC/+rGDu6Qc+/eIjkt+PwJPA9CZ+n/cW2R1\nks9CUpphiQ13L40O+wALOIBt/RP1B3xV3CF7/ToYu3Q8fXvxxE/h+/QQut+Y\nX+Ec0AY/LUk8TTS0OjxBV1SDxmKuFn5YQugqRtDFhCGk0tVUMZTDrhkIsgZo\nQP7+Eo8IjAE09yUpdDouNsbBLljThSYUDW9UCHnAQi8yXYWZGV2Ywdx46aK8\nb0F+4rdUgufJlJ1cDIv1ysfZZP3qxAA4quKykuwXBaUAMFAhtyjhvK025hbp\nbdDu/I/KHZWc4rJ4Tf2ZyafaM3ue2mrpYTNwaZoeYAlUJ42wpZ+TpgMz5FNa\nr2IA\r\n=2Wj5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/cgWXV/uRKBM2O3EpI/8Wan5/IgPVKNRnE1iGmNyoPwIhAIyq/PHik4G0Eb4cUpaSrIle+sg+gVHiUNrWCTWfTEic"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.19.0-canary.26d34b2e.0_1599170181841_0.6327497530292285"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a1c44494.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.a1c44494.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a1c44494.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"ee68077e51a883c9a0728019c33ed96d4563758b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.a1c44494.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-etvWmCDs+LfJEGGsTi+Zu075esSzrpYmnZPdlMhaKbkZScO9PMaVYrc+Y0WQXToHuOkAcsGbi3Awvd8EE3m2aQ==","shasum":"fd71bfc69231cd14c17d197bbe611de33338edd0","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.a1c44494.0.tgz","fileCount":13,"unpackedSize":56451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWVH4CRA9TVsSAnZWagAAtI0P+QH2hDzcvzS30LzDIQfN\nJq92vgGkEkz9vgNS3VLXH8IUzdsvc/b02+6mMA4tZbqxdRw6VxP/70kxQRLR\n6mlXrk4dO9xhbDyojQZzrhAXofQHoDzhK5O/8CN7ZhqDePDEfZ/oJMYU+6CT\nNsXUo/ZlxvKYZuEqRG7SLwJIyXSPZn/APAFReqHXECj5Pab8CrFfytEufXdh\nesT1CSf38FKvj+PYO7cPa2mICjWah/ZajQ7yE4FfGMqHpJyMPBSLyMVHuMEz\n01031TJ9PBMw6VMy3k1ceZ788TAUxqTH4Mf0ylJr9lJnweET8/xOKjRJEffl\nSmLVod+Cnvt80t3cpThf+2NN3vCAUjXJUXg/mWfqspIRfovFWx5ZKomYlJX2\nMuDWTFsvoBn1Hywqsjq96StOqiyBJdb4LOwTjmTXAJz8uyR5YfPVgAjRnNTq\nmxgLNrbX5DMv0vBHKiC83KA1Stk5SdlXTXyB6kB6bO3FT54qOGg2x7/2ZpPE\n8+vSAmFSWYxWVimdbLzCaix+bxFX/dy1pNZ3SZBCer9rzqxBaWPWDOsKh/It\n/h65CcDCO35h7hVlUPylxkcR8MnRSKPgEt9BQTLyoZutQ8vebracuyEL09HG\nJCi4+ozke+SFXdcuTDgJsN+HBVi2CSqOZTjB6zJPhOYX9SuxixlZw+YF5X+T\njSl8\r\n=mz5L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEsz/gun1MSAfG1gRLz4kfU3Na8VbDh3bensHaZEbQDSAiEAqNIV3mKAL0V8eMIdyrXaXp0uyaEZ4sAVfOZSl33SJcI="}]},"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-drawer_0.19.0-canary.a1c44494.0_1599689204944_0.35051536403769723"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.be1cd1e9.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.be1cd1e9.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.be1cd1e9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"e4ece959ee320d67e92b5c9add79f6f7eb4b2be4","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.be1cd1e9.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-yCWljA6CUeisG/tua7PLu8PSwXv5kVlqczufHDB+KjBBZ98VdhNaXvbz0afYtkAUG2cB8SlDglQv+qISLYjDEw==","shasum":"c0953ce2a7aa8b03fe140d3b8afdbbbd36d70d68","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.be1cd1e9.0.tgz","fileCount":13,"unpackedSize":56451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWlb+CRA9TVsSAnZWagAAWdEQAJ44Ob8ksq2mX/Vab6So\nmIMG6a9L1ovakXcBg2bQz4vcGitBPlH9UJcvaLUlaompVnSLS62PGhshDl/F\nxCnQh0nkqGRE/vldavR5MfcZAR4GiNpWIlMRLd7sIwSVV6xknV4D6FuaN+SC\n73KsJYqiU5ONxkmvzjc3raKUT5uXd297l9dQ3Jp8Nmo5Dr8YxZSNyHSCdaGa\n6RUzCte5UrUiZZiUaTw3yAJUdCy3or1u5891rZ5sS2IC865HGBWV40aFLisC\n9kEDCYs+bf0rbw3gtHOwAaUyxdspWyqZhhGEhTmSdntJeXaRXgTSBLQkjw1F\npoS6RuQSQSvDN/HrX6QxHcMpLcvtRUxSjRRmsW7EYK8qLEtOVcOgVlDY/8jI\nDCyuu6htgWxLyv8Yg48RFL48+6l7y9vrf9hUja0/ieZkdAYLjAznmTMANLgL\nXjJpI9chagXh3cC6x6aQ7rTGgJQrBshVGkdHBHyUAF8HKWIjHqu6gORVs+FK\nifoxPIzO4gMbJbTUWfDIbXojp6GzJ3bozZvZg7bQ3S6QrdezKY/PCxlenF88\nGfsqLfp7VeVoF9y2hF7GZqexC0RZjGJq2hYVC4TLL8xsaQ8pXFajtqN0BBWQ\nsiSbMoDbZXEX+OkpmeThN7VAmwj7IwU6I6m5nQqkPvUWs69slPLFcICsdF/h\nzmI3\r\n=M+FZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC7UmyMuf830rxj2y2sgh0sIDCnenYW9i672c8J0AbcXAiEA/GV/xFY5kMPGTsdiqL9XgHc3synjcUDP+eloQyAlbc0="}]},"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-drawer_0.19.0-canary.be1cd1e9.0_1599756029660_0.46462300425899117"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f094c0ce.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.f094c0ce.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.f094c0ce.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de510bf2f44db6ede47942c88abfee6266225354","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.f094c0ce.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-mEZP6ZCB051mYDh0j221tKt0/DoPNdqqvFjtqkWQ+xw/ZkX8tbmbU/l7++dpE7JKFGP9Tp9WAOTASAV85CelGg==","shasum":"8f6d3487b24b7cf99b99ad4ffa8a8ed7757775a7","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.f094c0ce.0.tgz","fileCount":13,"unpackedSize":56451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWmPvCRA9TVsSAnZWagAAYjAP/2X5qrFNSlaBLjrGYBk2\nCjw43EEXrAAjOLLE5J8DnM1zPmRQVvE+40QeN7mBRuu4e3LOL30S1qeACvpq\nG+bH6l4B1aaDZ7HtYDJfDnN1JZPm4b0cUxLxSxNYrHprTeqnglig5C+CHlpt\ni4FvpyiALw6CgpthMuLTrrvWo2bocOohdnx2UuB69LHr5CunMN+zXOiEDMoU\nNS2RLaqXgLU3ZSvUbWASlwJH3UeYG64LJ/VQuhamg5yqJBe1/qQrqhJWR1An\nic1i25tdqScpUMFQRZfsM22AhzIq923fEekSY1zaFdltbroOsjNnRAZo8I7N\nbH4e4P64wjv1YK+1IDvBdUNQS2LutBfQyQpRND37YFSUDo9cc7jSrn1cyN/I\nyNm94hHroOw5PqYk74G3ZQnjp7YvlWxb96JO68cfKcSSE/3LU+lXMnEE0aOc\ncWfWfLY13S0v08T5/HsdGAhcACr7SwLopFutDq9KHWXyCSa/Ut4ZGs0zTfh/\nunxlVrKgN0r0sByIyaZk1BywI8TBHr8H14yQJNzPdkgDmAibbU6DEqpMJpM5\njnoAGCzNAmJViMn07wkd2YRK4BSjah72dbjxv6o4fu8nUvhaYYTagKWfevaQ\npKEtFriFeTilwb4TSD/lmXsl/QXE9U0rSVgj1ysa14sfsDQLFlqeZP/RudgD\n09IY\r\n=axJP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG4KuPKlLLS+6gWXmB/vcztQliyM6z+jvcJQBZxGDG+AAiEAnbTGiU2xzH7QpMfle8CUZimfKdLsqIhfDjh6emvDEeQ="}]},"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-drawer_0.19.0-canary.f094c0ce.0_1599759343184_0.5531832177830422"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c1261e7d.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.c1261e7d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.c1261e7d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"d3ed845121c57e24ccb397b137eccd91a179c1d5","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.c1261e7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ska2WtgUyaOCb7fA5Mth1VO+a1iG6EsUkp2+4t9vIHaNaJ1z5g4AAFJJiC2CLsKtUvrZg/w6+rKwRncS3xZfkg==","shasum":"2e910113f6f7c7486a060503008543dada773311","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.c1261e7d.0.tgz","fileCount":13,"unpackedSize":56451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuApCRA9TVsSAnZWagAADssP/jC2ITjHhJ2OFU3tyFAC\nlf2x8KO6hB5LWC3Saott41BnXZlyTtTlZrZ3tnThB3lw00xeBaxC33GwZs98\nPw6/E8nUXJok5Ws1TMwdz3YcQ407laK5y9vqNM8MJaGwnYeu7wicFjypYze2\n8TdI6hbTZ3/iWrNcKsD07kBj6AsZyaNzxLqA+LQHKAQNZVfLBvNDGZC9VKTF\ndI73fDfWZI/NFtnAvCjUw/7zeGg719MmnKdMTsjjdUnE11hI2yH6ni0MATMI\nXr1tKWZT2QyoScpo+wEvSHXYKgN/It57/EreG2Vauzkp9vEaf9sG5sdyUJM1\nJs/L9N9zpXCHlX9WKv2TwOab0C7dWkjjbVJL6BhLS4Xe5RKp0bNhY5YCBX2y\nxfq3PlkxB261UyQGjgUa2GvjLNIqW6sXdWochgcVLjWCIvU8sRRJ7SSUjuNF\nBTC91Sh4HBjfMLN33F/s9c9uMeKHF6/Bqgm5bCQz1SDTpVKge8fCa+s8/oQd\nEj4PlNkDgQj2BOnyFxi93Cx2wuKRZ62Kujp7aeOodtTtXApnZvwIf9pjk5Ad\nH0Y8PJDGvzxhVIO3KvCygv2exzSOd5w9vxkU5xxTejwSagjCkgosCcihTrFW\nBGvSpKYR9duf+nQN/UvlwoQogjcYfoD3QQepwV9sWfoT4HaLcmxTBXauD+J9\nsq+H\r\n=u/ft\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFGnNuBhlLfTq5fpAq86WP7kI/JhYiHxhUx+Pve3VkTaAiEAwCObwmYNbAknhcOD+x/n/PAJTfCv/uw7R8IGSTHdm10="}]},"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-drawer_0.19.0-canary.c1261e7d.0_1599791145484_0.7696119696663697"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9b39ed1e.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.9b39ed1e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.9b39ed1e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"8fdf88b38d36782496195681d3b1d340ae36fe12","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.9b39ed1e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-DqpIzvCTkMxwHDAkKw72lk9c+/9HgO9rFbe3vmEv0mui6D1vEdxJfZwTbfnVojrmUyWDtnZhzt8BJBx8fqqPIQ==","shasum":"19ec0b1905a462229f065012ffe9a0247c378c99","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.9b39ed1e.0.tgz","fileCount":13,"unpackedSize":56451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuBhCRA9TVsSAnZWagAAZqkP/13etQltlmDaZGWZpE1A\nFLCmcgdLHosf/IlVzA2rmSm88CeXF+jvaU81nj0dijI/F5+kVyzyodh3YMaG\n7rwRksk7UlKElHnAgWi8zygZGS1gRHRgnOnTK6+HCcXNfF+gnDDkfbGXl4uY\nqULBjKU0ozHUHCtLYb+QWPfiJyGwrEiAQpk5INB5DsVp6m9oq1q74KQbXycM\n35Dpm4zJ46nnOm0FwxDC5mLSjtL4xVAPd/zpyuZV8UiYK0KN9WLPaOaGcMXj\nmUs0182+Lzc19TNnk59QVOSEZTCQZdLOM8MIosLmWQ9OpXmIs28sQ9mUSzEr\nwtKwZE7gcVQvaZbnsXTP4BtkTO0bCd92WMP7KQbOyRlffr+pW0npCpvpxtKu\nxsqsEqjWB4MdihqzFK0F42boEy8DDURGZs06cngIvaIp1ehS/+WayObGu5lJ\nuFxFvI7UvLLSGiMnhbfT/B12cP84O7DLcFtS4pOK9Y0qPjNCM7VAriPKBl73\n6ZTc1kp3pwU6Cl9lTP4GTxgh81nidLop0/kZEw6wMdV+26Q6v9drXKwVRfvq\n1BqFI+JpS/Px2HK+qf9cYn9VlFZDOmLwaJzlqQDLKdtue05h4Gguwpb3JsNK\nSy1c3EojIO27hP5gV633C7jYtP5ThOX7bKqjBOTDR6+DU4Etcsc+YU/WgpXN\noiuz\r\n=t1IA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHB9u2ubt7qN323oVvhNYLeSWmoxRSt/IIMw5ENjNjEsAiEAjfeGauw8DIEkMH1whJqCShMcXjjnu5lnC4GlaX5q6Og="}]},"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-drawer_0.19.0-canary.9b39ed1e.0_1599791201347_0.0457520561211926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e67214b3.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.e67214b3.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.e67214b3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"9d09adcdde4c822614f34fd4c8fbf1e1b07e558a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.e67214b3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ruZFbUaMkcWcerTK/1DMgwVXarkISAZ3WBeFYjAalTJTlTvAmYaq47vRSrr4SBtitw0oOsSjNN5SbU+W+TfT/A==","shasum":"a73e6848084375a8807e72bf9d2a4f7e909d4b84","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.e67214b3.0.tgz","fileCount":13,"unpackedSize":56451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuFnCRA9TVsSAnZWagAA5ksP/isXQ5fEwHDjPUmHJgvf\n4yBotqbXH8YwJzehrB2gEY7xUbYof9RuHRsv+iZGiQqF9uaqZ51/Cslh5BDK\nlB8diBg/1Uz/aoQOOWe8Nd8B8G282mhgbMjYF5GAgWSOKUsa03YXqOt/uSzo\nPTtIw+mVugVZ9XoA6E7KzMsJyOGY5cxUamUzeuYcxvPodmSAlrsi/LZclrCo\nolql6i5lfWLzxgVK3h5jmgWphNC6xd1FQQsV4Nokjh4+s5JbX5u4nRwjkXd/\n6UIUhD3ThJTRn8UeZlJqnDVQR7HJRYr7BgUYEE+QTqJ4fgdoV+OiXn2JZj1y\nlHmBaMNZoYgttQ+70Ro5qyU85ju7pLqlmzOXh4UogKtGcTgQEi1Hay5XxDsN\n5FlmuoL5cZoUfRmSzuJ6HTQE2Mg8COeGBliJftfFIawivpOapki2W6TK1jeW\nL4EfEOTOQPVMpgGAPGeWGnxcB6n7rFz7Ntj82Ja9moyfZqA0htzyruAdMKHV\n0aHgD4xDR8QE8xRKV+7Lf2IwJa0Ru+tHHBQi9G+KkiP3yYPIbn6C14eVpOpC\ncWmX0r7crPVFqKRInzHToS43sYYlsRPgCRULq7zWxPKUqg+/6F11/ulzRMyM\nq+U96cl7Ii/cXUJ7vaNvRcUAyctuS1TjQh5oJlVIU5FjaEoF9EsJl7hxQMO1\nP9Kk\r\n=Md4Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCarUhuZXSG/dOIcV1H62cyI5Siw9c+4WVb6ABaUSQrygIgPLKBF6iBCFTSlJ5k277gE31lH7Z10sQaHT7siLWDPNc="}]},"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-drawer_0.19.0-canary.e67214b3.0_1599791462696_0.7292263086327064"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.36f5da28.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.36f5da28.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.36f5da28.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"eb828fe61bd1e331e8d6f63a24f6e78d58858a93","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.36f5da28.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-1qf5Rm/D30HIVWTC+gQy0b8JLTyGApSZULFOWZXl/MHLnELMxsgIpTmppP6tvmoWHDzy/W0Nv4j3E0uhhPr0sQ==","shasum":"8f6a1019cf1d87b0d73ed52054c31d2f7d9084b2","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.36f5da28.0.tgz","fileCount":13,"unpackedSize":56451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuIFCRA9TVsSAnZWagAA8+8P/A5QeBxIRlA18Za1vfOE\nX04vntTWu1Cidu9/rX2b2x0XRUm3ukeSdu7AOyHGEL0MVNFld22ZrNHU2tdi\nEc+vRzwv0Zwf3RHjpr4rHRWTQUX4tQJCoSo2W0BhVRoI8O+JqbE27+pywzKw\nF32EfllO/JsNnI8FbGeoKs5yYXVKcllR394VRgI27KpVpdeOWyGi9PMer5uZ\nPYcQepb0cQGBGi4rvZ0k/F1lR7vP05kp8q/DR3YhjcGulPUaRiRCqJ35d145\nWUrKZ0f9jATghBYqsCkkecfh4W31JLV0dbtliXfQaCyOV7r+Qx+A/94plb5a\nXhZsTqqWb17/WHgPQl69LJtLzVQmh2o7O5WFagumaBtR2zBwuICQ2KSSrtq0\negCltcyTOtEuwwtu0KtzN+UApe7y7yAv3fPhUFPMGSkl+pxxX3Q71HXMVx9u\n4F6B9xulbovvQ6GKcsNJQjlBw20JFB6mY042yz7qWquT1uQ9q+bbSO1xfY3H\nKCxoMuYpModO+Fj1xTRp1Vfb0MQzs9BWSkQYRYgxohbKQjEwwjI8bsgu9z+1\n9ks20xgequVUb7eu7XAFe6kaElhTjZqc3xlMOOdCqGpk88tprqW6Bf81wjre\nl/Dm9iU4eC/j3DEjq6gVRsQ+eDSdX5YD45JxeTRIotp/qFK/K4qHwj4vdXA4\n1ggj\r\n=Qr7y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB4ZkHd5q5aUI4Vyb6u2NfeoOiMb109Rdpqyu66DMc5sAiEA7WECoSUPE6fX/e7vyYBMzHDV9j56oI1J5NvuPO/JUrk="}]},"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-drawer_0.19.0-canary.36f5da28.0_1599791620704_0.6453549565458239"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3babab12.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.3babab12.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.3babab12.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"3c0abab82c4079d265dbe68e3b3ce3dcac8519b4","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.3babab12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-cH4y5AZTvYi9E3AVpr94YNbQMET78CYs8VRKlCBTH1DryiJXWD4L/jfXsdsz5BdA0mELzU2C8m5Hx6w05OIRNw==","shasum":"ae58f0b63028954e58a15238512684ecc4dfbc93","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.3babab12.0.tgz","fileCount":13,"unpackedSize":56451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuKsCRA9TVsSAnZWagAAVx8P/A/U6eGWIfyUjRoSXsZ0\nP9orEovukAbxyXbQxqxrVS05jzx1nbJU6Pen8eDqF1GGO9F3oHQDekJVnXvR\njubU0kASBkqTmKVtCFQSMWXIKbq/72osl4K3A4YJ6lVJRhqIrBP9elgXbCux\nvVsVT4fbwPlGzp3MYVUjxA1vXCWlj5cnemFpHkY0fj94qYtN4rtGlB8kHqfl\neH0vGNp6reXqygWa79lUEr2DBG6W5CCNAB6/Wg9LXHwtHPC92aclfyoShjbU\n5JnNR3gr+OeDn1V3Y3+D7vHHl9OECv8LsYGIPKESRV5XT+FyKF0uC7ecOZVP\nUNW+V7EttQu0fAeFMrP026oW7itksGNw+xVtTuPjL9qZp0r/nePxjHUILLq2\nOX6XRf06XCe5h0fyM+mybJ9fI+xEKJA94tRW8AiKCoOr4OiP2uB750T0SIo4\nKMRYS5/MMqxrDVwV4LtVFgf1fvt5+PDErp7aOpjUQ3/JaYgthxOHTr2KmuKC\ndVE+YlGgJvGZjfyduay5gKpSnefInQfGRD9afv6jkKYfZLMmfzdrSbbOk4oB\n8gfEZ5lcr8GK67d7eja7bZxtJ0eBPfaZwGSAkpDOJNIdW8sS8E99ZV7s4HQ+\nXOeEwdm9oJ+fSf8Nb7/Oxi4tpCBhCT+ooBFU9KZQVYLuWZmIOwBNB7V76lKZ\nMFeg\r\n=7t5r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD834fVlwRyU2IFQWpkvwjFKGSP8LJ1coMiPEYSKvqu6gIhAIb9TNghxfJCHe2DrTrutTMPfn0yxV9gGFjaa+3Vr7vN"}]},"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-drawer_0.19.0-canary.3babab12.0_1599791788453_0.06214541066590229"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a4481e6f.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.a4481e6f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a4481e6f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de37747ea53bd97e6674642d17f239407a14ba71","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.a4481e6f.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xLUamdB7wYX6jOezIcJJVtnqfDzOZVdvdDP45Asouj8MzXDalG+Jpl4BfWxh8XEP16UVqG2/eI/R4j+3FkAJHw==","shasum":"981950586de2df8686781ac2d03a3a8fa63394fc","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.a4481e6f.0.tgz","fileCount":13,"unpackedSize":56451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuWQCRA9TVsSAnZWagAACxIP/0sd3NYC9jTfX+Ujdx6h\nC0acIo7D5tdEsb8c1ODnbSdPBHeqa47/j/IgwgsbYm0kOOYsbymMBB9b5ff4\ntdm2eEN/Ow4NTRNbYXvPT1VINCGVjpJhIAApOpEOeb+cfMJC2+oMmU803t97\nDK8QVb6EHIZqVSVe0msw07Gg901MfgCckU7ZPRfo3LAzeYNOwZl7mDoW8k4c\nlwn11dt8J9JHj3IqRFr6JnBp4MgFiuOPiI1erAOfDiGP98Jp7Ay1TYhGaPXp\nOqwFuGYgAcpKSZ0TXoHIO6wl0GeeTr0WJI8UwYkFc72P4ajl/rIboMeb8NzS\n4igF7XbFtbWBhfd2OmQTvRIF3sdWbWSICqSQN6qOuXKR9tQr8+i9iWa7OfuU\nOmlpwHfdVqb4v968UB+UvG6b8Wq01iD5ibW0wKHbwaPIuVF8oqB43PE1DOjM\nzZggaqMoMTiNixFV4twla9L5KWPdNunVF+2HY/fzbFq5J3kP1hcYbwqdIfdZ\ngVXe1oObYchkF0SfiJ4jMsL41dI/iFmKztIRde9KsHGZPuLEtKHQTuxWl1O9\noFYSagoEJcF4wHSst9e4ss1AMfKTtHuSmGNdnnIfWXupOOFg0Hwo39QeSB0H\nuJyI0iGRZRYCmMcXmcGncCoECmxqID3wejvYbArUdWFlBV8TBaRyWcD4KMI4\n8QbU\r\n=AiyV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDJABt6kFfWxOUrDrdLdP5Z1ZmbCNwukOOZrXxxoJdfnAiBtsnQTdwd/3fTkgMSlQsK1Cnv926KXOaYWAUaW1Lhhiw=="}]},"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-drawer_0.19.0-canary.a4481e6f.0_1599792527575_0.5507188758551582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a9177836.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.a9177836.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a9177836.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"172468b3d6a388a8fa5360f5754a4a7dec5b878e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.a9177836.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-IucalHpChDYfxlPKTHWXqslTXpNHMiJJ7YlCr87AmtCQI1ayDoMJLvEhMcOD71YdCuIkZprXnKOJHzquHPOIow==","shasum":"c80fda261b2257f8a1c8a5ce52d3c9b10d454a12","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.a9177836.0.tgz","fileCount":13,"unpackedSize":56451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7gSCRA9TVsSAnZWagAA+/EQAJkDj/5hbg/9Wkwaxvod\niorhd4R/Ht3aqEpaApKHHP0onI/uRRTvpIF7/bKrxieVhDrY57Xcj04eQ5JF\nuRQChEjyAFFX3MaJisBoRozlKHJNC93oRpjdmPr4XCm4h6V9OMymIeY8fPAw\nImdJd2qkrekBfu8YgpA0vZNYYh2d75ia8xc4P2rwXjTODioQMhLMkqqfXclE\nuCTjrCRoyJQ1YrM2t5tO/LFi4mjsaSGxK4OfFrP/7Byjc+X8Xj/ZRj//ixwc\nIQmo00LrbhEMSfc4SBukk+pav3Gy6ZBwOhn/JiF/83uyOLFJmaMiXpn2yaOW\nO75tV9lY7awhNeA2C1bIt8M1eidcoev2TuSfiTQ/fX5NCR5XbjHEUxoN8db+\ndDPzurhSh+uBxnbMOWPLksl/OrV0qSu6ULs/zwUwX6ehILNZT9rnSyLNdu6u\nOsS1wN0GT/f7eaJFy+YyXQiPoQmZ9tTno4bZk7WOGEw0rKsNZEw5ONIMSyjV\nFKjgf5PgZrOjyaQOi4TUxet1UPotPKYp1AMa+ueuw3neugVaooAn7MzGVrXo\nIedFK8IsKv/LVcTUvKynOYeh6tIta4miSFNQFWnxtP2osN50hvqqTqIgHlOE\nNDKPISLYJxWwc9qehPrdpcCNQggVRUY85F2zvrkphYKNDvsZQ6CbP0QHkTGf\n4MZY\r\n=HhJE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBI1ExIzkLPuGDeMmUjU8qimxGTYmxDMcbcrUrgT5r+bAiBcd5DuR4POFz+zhVT8MB0eYSxIIAgadAOSzXWYu/6b7g=="}]},"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-drawer_0.19.0-canary.a9177836.0_1599846417557_0.14468658705218518"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b102a3c8.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.b102a3c8.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.b102a3c8.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"6e9858879b6405bc690bd677e308d5197c609741","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.b102a3c8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-sNETPHlBqxlN8yzwoA94XtlkTc7uJnfY9/jvgOybxw05Rjueb1tKZA8WvNkfGMIWljNYYqFoALe06fG/HqNDLw==","shasum":"402d8442f2e7173772ee485d06e86c7df13e204b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.b102a3c8.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX87BCRA9TVsSAnZWagAAZggP/A05w0VXkeMyzcfLEDez\nGlNhLxEnmTTs1VFL+wLowvdq8bIWf/p4+j28XD1OWNjygv9YE/CR8POgZg56\ncVD42G0GEKM2dBTWX9bKkH3EDbzUP6Tw9FHGlc+vQWICdEquLWTopRZNY1eL\nvixkKEUAkuXhfdfxTSABroutAPbVeYd70Cm3brzCpp9b5rWqE56zjzsQACXL\naHATbpQvylxgjjioZpjHhFQtW/ujQsuuOHFhpqR0qoOtyNg0fNNzaF4nrW/b\nWHYK1nqnRlbUeZ3dr9Hbz+RYtGERInOXOz4VUDtWzcxttwTfVN5JyDntfeTx\nyVSsD79XeaJ36g8AUGQY4LwZaQ6yGjzWBo7Gm3I7bWqzv8MewJQ/gXT/sD1W\nNbzUoBK813HdZ5c6UTUqBWzBN3aVuaLhtR9LwZz7/yTmgrmcvqtBIFt2nMmd\nZ8N9jXqPU10/vIbPCS2lN3UNdHWr6dzeh0Cg0DctQ+CodzOR93s4ERJNNIGb\nsFh60z511ySWmzES7q6v0iBWUo9jWd5EDR37xbRcC6NoCIAzBhhVAjxtaVtP\nj6kxiTgdmkBjCGfaZpEh2vZ3h7axHIFcP5LcIs5n4SBEPMaDK6Vi/eKIrcvV\nTbZvED91olzx3AoJfTUtNvFzoFXC+3CC2yxQR4T90oOofZbjfQoUwWbgebtA\nQbHA\r\n=cP5E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBiP2ROllNu95MUuDPwYYrdRDSfbKj5AOuRW+lmDyioMAiAe/p4POU293dIJQ44sHZA4nkO30EOdF48tgHIJrqqm2Q=="}]},"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-drawer_0.19.0-canary.b102a3c8.0_1600114369285_0.30152286277533014"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a7fbc707.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.a7fbc707.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.a7fbc707.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"02e804c299cde57ab03b33a403a43803fa9868dc","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.a7fbc707.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-s23MpI3RcRqOTWJV7CJKMMaB7md+LiY2KE+RPsRTgC2m7YdEkEFddKvIb00mOPlhFlWJb8ymI25DFr8O/kER/g==","shasum":"d4a0e903af0e8c421e2f89f90dad459a60c91d74","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.a7fbc707.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYOYuCRA9TVsSAnZWagAAVPYP+gP4fTTugFPq20V5r2wR\nGGGlzdcws9MNiugFoM2PQGRgP+zFwjzPsubMCiSdQKfSfTAHKagqZur9kTz8\nX3Qb4sqfMddgmfoajG9oTcUNkG+t2LWoLFiNSwccUJYzllKR7u9Sq27PBeSQ\nRm8StyFt+ExBN10isn1cRJn8nchtpn28ffsFhbnXLqOpCGa6qkbjZGePl1Fm\nLauY2LDsFWhkbHUaGLFshB9TJ7XSCzbO33ae2u7jYVGvBpUDgUkuCtqL5Cji\nP5UYas8kMbU7F7EcLP3DjT03KgrySao5vc7tAOh32hrg9Mf9rT4vJVnmQzSE\n1Qa6HBTl+fnqTv5H0HfCkkhoe7VZiinjkzr9DEaHOXA84qdHhv5S+Kq0xnmI\nEiCyiX9mRz/n9FbyBo4KoHZnMNF3Zz3F3sjY2wm4fsNPtcF7Oxz6ItBpt9qB\ntngS56KMYR7hxtFnNweBqKlRPCY2wZRWbVISIeAkEYPyez6K6T6fjVAxWe6l\nWsJlIiR7UgLkXGZ49G0khvDCEhghHBIAfUm/yjaZ2qk4etEGfauMZHqm8tM8\nfWDlCnQcaCu8GtTay+uhpST0NFiKFCYmQXuMOOQp7CNvhhJwE7ubxTDGGbU5\nMSYygqM+n1ldXbEZjBNraXoq8IKCZglcARYfkr+2ba1cTMD+VCSIHUygiYnj\nl9PD\r\n=sQ+q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkP2cKgI7lFs51GekrPBdROkK+hDua60zPtcvyRdtjCAIhAMuNXmKRSGXEYouWr7Qj6F553vJfUGD8usC5mZh8Hz9P"}]},"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-drawer_0.19.0-canary.a7fbc707.0_1600185901722_0.7227855420269937"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ed6b8660.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.ed6b8660.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.ed6b8660.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"1367f8f205fb56c27d6146b261ef87d62751f903","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.ed6b8660.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-IGSGWyvktzX/95FUQ3kFxiAWzl0tk/XijM2hkfysDz42ATuasPNFdS+4wRuPB0Ibpr3Fw88kWxZun/6q8gwzDA==","shasum":"7c335eb0b33877720b7fdce9701db4adf4d5724b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.ed6b8660.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYPjGCRA9TVsSAnZWagAAeUkQAJ0LzK3DIn3ldC5GL51p\nvBVLpE5jVJ1sXNcXiMtdwDC+kPdKqqViPCCvJu9YzCrjQCVvj0mzF3LmOJOA\nxiqLVccKN5ggk/TKA8E3ShCbPNw++siJZAR4ZQWRzB4dkmVJjJ4A9B68sBdh\n4UJAHbwyRa7VnTCxEF26Npd8fCPi9u5B7IBNeS09bzYRRq9rkAEMajvnnd6c\n0sSwP30nn8hiYjxQY2o8rGFCPprqo0m6kaNOD+nmfy4m32ATjs9wacP/mm55\ncyTqzF6yiU99GaUZQh01v3YRIq82LQRMI5cUGnV0z4DDG25buD/QeP28sR5j\naZP47hUsAXJeZMpert7gK3hQNPrUkzif8BHj3jRrh2yZwubGHZeJiRd1ZrSX\neKrdOdaMxW3aIramYKiWtX9VjQeuyxm7gwweV3FIez6/e8l8p2IR+Pzkyz8n\npMBbxqfbw+uts0H88OW54cP94jKN2le0ssjpaMr9uZmkdsEPwpclmG4CwAlO\nr3BKo0RmCdFShDHvxrM6gGpn1FdIoCa4ygB95rVFuhrOYNTOAmQ2yF8Tn+IY\n/W7CPAiWh5A9UnVKv9SR7PWNIlhEQq34JIBtlGsVwVSKn5kqgPcw/HDm65c8\nBQBU2ioxPo0assmiVUdES9BGZB3udyXsZJYXkfgzp5E06SZ4jmunRukfc02Z\nE0gm\r\n=3Jxd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFC/37z13rcqbDNCU0eWFcPiGlrWjbT9MMzJthbI+GfoAiEA1JkeiwjjsqSsDWK6EbXFN3TPGx7cweQxJGg4Xfmatvg="}]},"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-drawer_0.19.0-canary.ed6b8660.0_1600190662064_0.561876377251914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c2331f5.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.9c2331f5.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.9c2331f5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"59f9c402cf61ed25b9563e2c228a24b4fb13e1cd","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.9c2331f5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-075D6d1sKnxsz0xwsoJeTAnGDz7p+kC5B0eZdQdcNhZAQ7Jnez7HZbEjnt6vkRoBBjbivVnP5exyWtCzdHfmeA==","shasum":"8a4f643f272960f9a10e856370a8ca9e41c3ae88","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.9c2331f5.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP6ACRA9TVsSAnZWagAAHDoQAJUv/crbdF+mEWdGFU8o\n21FE9Pq6MNH3NuoI/Zz5nTchr8ElPjpb6zWGTITGZOWc3HhP4sqQl8FOWmsW\n+B4lJhhytVbcUQ2p3QtzdmIhsGHFGxbuMr6BGMW5LbtNuP7p8UNF+ezKIcGh\nhR501ZlM4l4b+mD8KIaMjI/78ahTD5QvntZXG6IkVxnC3Eh+pLKsMb7NZpS/\nQnjr1aXlDc1WPQQmKXEp+fZ7Js51y6bEI9iEPrkQDx0epv6dw5hKqzIHfPiW\n0qV1/d0lpWTvQ0U85BRTJth+PNH9SNXo+YhQD3D3fdSr2L67aoST77ILtKGV\nCqgT94IPR7SkaSvDWK4534Qe3oTVKoU9td13pM882SJf22fFZkOb+meVRZ5O\nN5pwLXRo8MYOQZZacrJ7T5MmQ4f/KAAFeUqjggnhHqTDUzlF4FcsIZ6EXl0Z\nV8lGgrl6g4tI/FYX2s+qY5++rAjwad+2DZJnV0dcSmF9KnA9TaYgy9Y6pGQ5\nvXdOXn95u0ass6bOadjzO3wav0CWqapJ0wH12/j6AkCl+W6kNDEXdiS9hzw+\ngjIoyGZRwvLXNks6F9p6Q/anYDtjZWHiXRkPjpbIvL9HsrVQidENvCcXRwpg\n9SGnfaq7vSeqifayi+qsv+AyE7lf44D84Fr3JzqRXa3265do9IcJj3sCF1fj\nkLDi\r\n=Mq9G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDNFT+oj+Z69vcfYkF3B/nEoT94EU9BqKzE8pyYG/lEPAiEAxqCFrDtokhlNpw5s0+sGlgNtULffqWijikicd4A8pDQ="}]},"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-drawer_0.19.0-canary.9c2331f5.0_1600192128233_0.46050891498759117"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.63a5f088.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.63a5f088.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.63a5f088.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.63a5f088.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-QKXFfchXhFtCYXllMj/hI2ZsAKvcnSx+Q1DD940ZvRLNRe3KCj+xE2vqLINWDgmWiyL+5XlkJWBU2LTbgErYWQ==","shasum":"2561dd69657c9239ac88619da0584d9e6a452494","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.63a5f088.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYoWNCRA9TVsSAnZWagAAKgcP/iKohz4Dq2g3+vSFQ17N\nE4fvI9ZnhYoUoDKD537etLMn2dvMgwrNMJopY14y7l8m7vim9H88OAMmWUIF\n5oUq+8br++Ts2JNtVzZkhNsTdyKlRTdlO6k/qlMd2ZlERwCFoE+pEBV9denV\nSWrxR2j6TtYF9umONtpP5M5IquR/iwugXzUB3E7X2/efeaLr/nYKaReCPJA5\n6pZaL52iqaQOe9GLHroFLbvDK5pT0ixrywXIONg1x3sEDjdwG8/vR23INf0g\nqzrqvIkBOKmMZkBanbyQ1f+GnPKPYvHEHcoYTmih86BEBPbFPZ5D1BfI0G5w\nvTf+aiq1X1+y4kNLy52MordjJ0gvNjuAl+LLC6Pl5gJPP7kDzm1gbzVYT3v8\nE9BI3KgLtP6/sLefYpENo+Cpqp4rXOK/IgkmybNlO4hUhh0Ex7RePF3EYDg6\nGM63/YzARKrc2tSzy3ypu8jV1a12nhuuc8zaJO2kWKe0m4IV/ph/21yLrSr9\nmicczuI+EfwcKEArCBDTylljX6Qnm7Ahc8J8mk49B/dgVHfZqU0EqG3l8L87\nAJXGozNy8yMmvG6vQ1ZhEQAv0IbsoV/fAUs57ZyevhMeddaLbsv2XJGC72u8\nc7rfhwi6cKQfP/0wMG4cU4y7PlvPIRHt/EnEjR6JPwCF4sNHhy1JNr899Gyq\nipr9\r\n=w50x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC26KBIegqTe4FeOPfYSIKkODPYWSp3bde4dNI4yKb6swIgO+bH0nPnDodoj2WX6EmubxfyucPDKnMyxCGybfS8d0g="}]},"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-drawer_0.19.0-canary.63a5f088.0_1600292237399_0.29967435706693935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7995e49.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.b7995e49.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.b7995e49.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"18f169aac3491f89184c2463a837b86dba845e82","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.b7995e49.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-i1uVj8o8hDTAXMBKyy2qlMFOZ2Ws/ZwanyaL/UswfX1At39MhRWggSskQlhuTn1LHAR/dC4osMbMaSjrmvsYSg==","shasum":"67bc13328c95c8c0ab14f461c91a82cb33b02d78","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.b7995e49.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYp8OCRA9TVsSAnZWagAAr68P/1Aac/bpR+kKVIKKKxXs\nmdToc+X937Uhhq9rhZlhMZXXSAZVqwXjXKXKoIdS9akG34j7FoxW+ZqW3ONv\n3ceAqb/WNuEchpcpZYjT0+2QJ5hxU8av2JhQFMpw1gGc3tikPwgOgQ5pu7Ld\nrBgCy3+NZauH94HustPHcgGZKt0vpMVaHMOJsQK8sbjM54IzyWST2fKoCUsw\nuF8UvmC+ccIlRZRDK7XJ8EJpX74JBtQKQBuJ/INbMCbvugbVZD+HODGQOa4T\n326/SVYlfvLC2SK2vB4XPdVGy80QkM4c9OIC5M5bRQvxlwXrh9GIKKrrSQQC\nTpPze9ZLgkLOs2iefhsS1o1/2+L5IqlsKJj8cRfL9oxbgcEXIjQmNCL8c7Ja\nGXMgMtrDtfQJYvCjK4cb1OwlTkoTxIVoJJcl2z+t3dQ7rTIEjlaH1uonYr3+\nMkY44daB8Wu3wYmrbhXowUto1eBJXbqyCbuOiOv8ctd/+qvgvb3DCnnBpzQE\nCCbuiBVYfGxxK0IEEU7sBw7fTdlJdgA5PXi7hcEt8IkKEUO6d0Tj1mtWiaBf\nJaI6gpOC+gp1doKOIPGX/LPVtZE+vLPyzYw4Lzb5f5vtsbBWFoqSWg8JgA2d\nyGEggZ3PtAmx0Vdll6g6blgjNaee4pQG38lZSeXje4dq1i0UgDrico3MSGvk\nkVzC\r\n=0n7E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/AAgv9demoVQMurvQHjAF1AXiGcVitgxN3ClXaiy4wAIhAMQuGCMnBrN0H7uEIRQIYjOwvceSlcFDUo2g2BAPADZD"}]},"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-drawer_0.19.0-canary.b7995e49.0_1600298766099_0.6468789017031891"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.0da3ec97.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.0da3ec97.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.0da3ec97.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"5f18f76403ebea15763db5e696b84d6d20a3768e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.0da3ec97.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-whTAb+ua1Nyj8cdDMqCflWCrsZxP8PZCYyW2m2W3C3I7M1kuXyfksZw1a2oFJvd1w2uedNY5vhs2Nl22xlrdFA==","shasum":"3200ef690ccda722fc606dd703c60d5aef90ebbe","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.0da3ec97.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaSRKCRA9TVsSAnZWagAA15EP/ijuTMFTHRVcw5GiNr7I\ndMwx+/7mfXSp0c5feC3PonxBiG108ltho7iG8In+9GeZ7N7MODGEYm/rPChq\ns9GqtVCUHM9oUyxDjat/LIg5NDJh8NlEFpuQOykw9Lm82cNDzT/uSUPAosd8\nslZtKC3N3YJOV9ODNrqhxUpJ2ldaNZXdiSMzLz5fZgZFGt+X8evx+8T7Dq3H\ntLqKSyG5KkpX2mFKeGQH3AJW63+VPh/H4CDj2NP/UyTsjH5mj9JWTdDUG97Y\nBgkkMGFJIgIovjNEvXNu5UVFFT681PI63LcnFAgbhgXOxHZclYUMn0tGFdLo\nAM+kwNmiEPr0Ej0onF9YJ25D5zp/+yp2rZj6aAykuCZeECNEzAUNJw6vSa1U\n407HPg4AGyW8o8zOy9hcfwTzXQt0aoOKECjvR1mcYpaqwzNWF/omkd8T4msB\n881O0ld+jhbGm1BCetP4PqhajPNCYPoeq87/5t8JShklAgf9aR+u5j6cYY+Z\nSsNb1tnomPik8/jyOjUnTkIjYY2BB6zjPQRGegcHq3xcNbQYOJ9/rsoEssG6\nZfKnarsVJR1abxhQ1F31cUYViZVEgXUbUM6GaY2IUw2QrJvfaO/DCVn5Ua1f\nIM+YtrWzYKtzN/zA2X60Z0fZnUVVXug48FZGYO/FDmK5znm57YYVVEtSQnGX\nLawq\r\n=z4cE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBVTD6vS6ggXvg5QVs2tvup67lSuwpLKxXmwwlX9x73hAiEAt1oYR/BNvrlsJjxH7PHeyebEXbOnPuTLT6FlwegJds4="}]},"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-drawer_0.19.0-canary.0da3ec97.0_1600726089853_0.8315779710038993"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a0793c96.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.a0793c96.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.a0793c96.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"4332e148b28dc28d9b324306eb18987b31a80ca5","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.a0793c96.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-5jLw2LNfDPfrhSU75LikHbe8nNdUq0WC6C7sJAC5F9ZYz5iyCPJFwtFI4DmWfZ/J6R9yTtVtFEVktvEAMSIhFA==","shasum":"5278e6bfe25a0f404a1ae53a22f5ddab8936d0f3","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.a0793c96.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfai6ACRA9TVsSAnZWagAAhywP/3N9E8DC4Y74dQODzt23\n1850yZuGr4R7FyT7PFTSua3b4rDauntLSCaiBuuF5IRwIt6nnfcBWYqeq30u\nkULoRnwW3mRvJfcFX3i6CGPwMuIE/20EgO9c99PBgtojDL2kY2mbZLYLLcdw\nnGjlG1A8x+DMMd1HRSyNrGkbQW6oK4C5u7tYEtmbmyY4UislNxEtFFzavL5J\nvnon7Xf/wtDkKbK7iBqXI6c9RL+uLK+avSMQ9OEe7QsXggdTtthfS84Su2eS\nFeFGGU48uNSsxgBO/J+U5sCsm8wt4FlsN3w0oXkHoiUlbWzJzo1RuZobHMNz\nvlAqKFK/vJuYo2PzAM0XOdBx3ORiGFiK8rtByrPGSSadq/WTG9VyYSQjpvmh\njKmnyIUtHBtOMw5+S7EwSPE75VlmvaY3gKbsegI6GN8vsElkylTrfAvM6/Rk\n1jrUBqp9j3sIuzfp85hiCJRQexLcALcA5HboE8v4KgBvBwhhhhLruxEQa3NB\nIq+pZ+TzeIJXysJBt7ZfDHgXIGKpyXTjaYbLk/tHQoxy/N58fHJr3TTQFDM3\nR6XrqCpSiVPVnLiSbKnJodJ3qI+0atHRyYVIjmBFFUDAij4T9S8by65rArjV\nIHwWTUDlo0frdqVnMj+l30NgO2c/dPE1DQ1kDUL+emeBmNautdxYgRS9Q7PM\nIeXi\r\n=zv1H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHGkxZmy69C9qgrsLI5nBXzeqmRp3jLOqq56nXR1qWogIga33W60wmpDvvmeXHQdO91oRSj7HU02p3Iw4C5SMziLM="}]},"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-drawer_0.19.0-canary.a0793c96.0_1600794239611_0.7825668836723001"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06998a3e.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.06998a3e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.06998a3e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"decf3423597b14fccc721d29e0ec911320eee3a2","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.06998a3e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bHFmzGzxggNvoqoaxUReLj49j0SEDLE7iWuMUz80Ria/j8kL1ZYJF8tH2SjifpvVGEHQbe1Ys0SuOB+JNUWhmA==","shasum":"1a5185ed03157fe70927cfe786b98b92d10356a7","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.06998a3e.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfakGMCRA9TVsSAnZWagAAi/QP/iKNXL7L8gryS17yHBIK\nJ2RsBm5d6sjaeXIhS+/9FXklqHjEsFBRyqLjigyoW9EFRHGk45OKzuq/3raa\n9IOAWQWGp7wtMo4q5cCFXV+4dCZAYW92e55Q6Ju54IQsS4inTC08AKxty5e5\nK8QEHAvldQBEm/5GWk9Rm+0zsVw5pqiHc85jKUznD2FAY2/gqSUjw5hja3Rc\nrgybmy4PNvFnueB29bsEAFlS85ueQW5rOmzCRFAEXHd7dqNGxfSwgK7v0eJa\nmopqDMOBBKYCH1DHv9QlAhS4/lFJ+i9ORdQbZgntRtF08NPdhcrHGmel1kco\nK8+1E4KtuwXuOe12KvkKkIwgIkjbrJypGilhZOzP+Td5F2/x4Llkee6dcXyB\nQQR1oT5cLPPV0dvvfSFuhBeQNTRU4nwOdOWfwz3V/8F8ykRhHaQuQWM6Kfwa\nKtUkXHYO00Y/oZHHOuoWKHVchofMAmn82c6qbjG9GCuqFPaxVPguK/U7Ir8+\n8E5eLrsLaafJmtzmp1UmvXvSWdZX53ZOgD+8ofC78LJ5VGtrOXSKwEuu4OZp\njgxZrfgB/euP/szrYLYjSVx+pZwh0CYsvlodWb2++/5LibZzJtBgo4Be5gwr\n5624k3U4HdcDtTAvRQ2AeM5rL0IZK+YgtW2aXgZNEQSP7mieyifR4AEC0M/K\nSiVB\r\n=f0aQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWZRTqiCgwiRaEN1MOuTlGbNykzSZrXxLH/oJe/DruaAIhAPJihY3fj9UAy3K96+FgY4epqtN06L9WjBG9OEiss2sp"}]},"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-drawer_0.19.0-canary.06998a3e.0_1600799116418_0.7517505047600628"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3484a90d.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.3484a90d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3484a90d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9a495a0451ae2f8e95b786a624153a7b57c4760e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.3484a90d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-kUq6+TWaliIfmdUqy6RhgD6v/BWZ6QvXP2wmmkcdCXS3/W/3yoL0yYCVEZG1Neyq0j4lTPRrB/5k5Xp2zJmB4A==","shasum":"7c25fa03d5cac63e5599ab52c56da238451b570b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.3484a90d.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfanS/CRA9TVsSAnZWagAAHZkQAJuz8CnnYmmyLSywM1Hs\ngZbtEiDqO4YmJMlvv3uOkHr/W8oYIS+vPdRHcs/RL3UrKs5PGXOpBjmNhfnK\nMc+svT+7XWj4xgV1vuLxl2MPzXSV5iZlb96CPJe4L2P8bjX0UZF0B6jXecN+\nagkFmROCRdZSIR7tTUH5UmNbYcBjO6A8gWBUhhDuN9YmxAcZ8OoCeOcoqcMY\n2R5LzGk0S+4W04kbu47MnLmwv4wtIHBdl0M1kbyEHzEfS3J09eOPFyM4CM2p\n4swtxGdpZ8yVKd4pdYnNK42in2O3ulNbN/ODpaWMKbXp9/vN6ng6i8k+zH2N\nceKBa2oXSQJFCbF9HWhuyuL13KkN8HYjzE3cxZ0gzYJjaoUbc267DKwjLLO/\n+9VDwReN2BJyEWQykU35QRdVr8lKvp7UGmR2IRdWJ1De+FUJ/LS3dnt/0ZnJ\nBrYGzpAKwMLgnAIbT6H0zMBkYyT3ecxMSDPdxbJ4YuC3duTjksIWhujxLW4M\nrjT1rQA1dWyVmI+XEvBjkHr2shoomDUssqB6A0m+1e+LBXsCSho4/hh4406h\n9XXi8VoN3a3tr77DdyHphsfWWtWLYlMuvYc4za1B/LC4FB1tnAXBLNTXT9+Q\nqCvUI7orCRN84AALichHaMCMk3yt6bCzPEBgqigKAUcU4i6Yut6noGh/UVsW\n022z\r\n=Z71r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHNI0AvHa3dbKSHBO+Rt7T+kky4qrqCWC7IihLJ1xvpeAiEAvFMCd0QmsCanwGo338ubDkY5qy/gU0pI7QJhd0tKiCc="}]},"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-drawer_0.19.0-canary.3484a90d.0_1600812223450_0.473892881613057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3f99af40.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.3f99af40.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3f99af40.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9c1a716646d54bc9aebac750a99d1fa752f60d9f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-oFTX5xH+0tCTRRfMh8hrJKuPh+Dm2FNLZmIVQbC8PU4Z54mnTmnULmAc79vXgb8O9/47Y0GKJSm1Imok8Sa1gA==","shasum":"131c84607e6e8f3ca3b9189830b68cf0d6b2420d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.3f99af40.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSnRCRA9TVsSAnZWagAAMAgP/2denlZ7ybqxnCgPuR1m\nFpotDvAb4P5mcf8ON2QDo8FSuH9sQbZ4AYFL9HHzg1HW+Kz8Whm2mcDAovcC\n0cUANYgnY11Pfg7j9tF4Mw+T6rR/YVeqfUgaRTAmAC7fSbKhv6ab7ddJEsSR\ntreWHF/sTWxPpYyI5t623mJ/xF3pUGKfoqRNLEJ/Y2RoJLIenFThUT8A7+Bd\n5ubQMv1vPTx1pUpyIRrEoCYzfgT27Y0ih8FkyX+oR5zWxsvS/gz802215xoT\n9U7jXpxN3Ecb+pO32M5csqljlSN7KgKY+/oXYsKliDSY27hhb2EVzpA6i5da\n21KgtLjXPC0bY8eaDxfvJeEYh5eEY6phTK4ClD+rreFsMccGGBdFY+ZroZkt\n1OCJyuPpRjtpEPSdg1hi8NRbnNS+pAJcCLCUhIJi22EIJkHhaJz/4TUYOMs6\nDTBCPjBZeHCL2BDKNrUPUkA59ih51Gn7yzB+ps7w21O+eGs2nhwUeCYu3AXZ\noBx6Cl2nKpcNCNsnm8IOKitPMc/TllZFyGIitfmsBAfe7UwhGkyx4uhLMnik\n0rTRNRsxMGY8bKvyhyysMF731zh2AzDmurCt6deJz7LkTx/H7pY4ksL7lcto\nYWZlpyadLHhL5ew0UnK2FW99bnhhhMQhpDppNnhmz9LG6RBfqFF/yzPvaqg/\nefp0\r\n=ybLC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGu36fpv9LCjJNhh2uE8iTbptWy0Q0qsu1T+gYDcoI7aAiEAgn7Xt9SlBvonyzVdcorpBw8UBE7VzL4MaaBpyAOh6qM="}]},"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-drawer_0.19.0-canary.3f99af40.0_1600989648875_0.4035430558816584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.72aa1129.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.72aa1129.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.72aa1129.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b0de5dacb779cde3abc9f66672e5a936030fe63f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-20MGpWiJJE9+gX4kO/9uWJdjoUuvLa8s1F8Itc9FKfxKlB+R+cXeL45oF8W7zTu43ouwkt1b5wSU8nDU6ZOxrw==","shasum":"bd41d3197674b51b0d8bfe31a8aabfed200e339d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.72aa1129.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblvlCRA9TVsSAnZWagAA6cwQAJ8Q+Fv9r0VRWncf3/Xy\noYaFgo11zdFPykHaTLh6zHiNwHh9beBcV3jfLuYtsTTf4lybc12UUR50YbfR\nHu2cPMm9BHgZ/Yfoi6TEQuculN78PvsSSsn9apOaQcY7jDQF6E+mQalHJjOs\nMEmq9Il/pKe+vERIhwXLmd+Cz7XiDgbiCLwxwLf15U/ahJ7pvzJqYDd2RYXn\n0yBfavOZMD+Y+eePM2iG4yQS9q8K5iV0TYTW6axruONoEM7a4e8MOPb0p5gE\nknUfqoYyWLaKKBl7TqSvYmAiMD5eUKLcN3SufiBVLkXuzG7jmcfXQ2R7IAq0\nBrdv1XKKtW3j4BGh3KAD1KyzvOju3A38P7/lPM2knOG9aPyT5bjObobRAaAq\nsX3yxKhfI5E+EqDcB81vd44EBwq1BwRzwaNNptiwRrxM+ceLWjVD6Bn4TYfl\nSFfX9/8OuD6BCFTpkrn96z6vkT98YoZrthCDfPRTtQX71it/hx176LJ2Lwdb\nzdWGP5y3cAEY1Lzw+SFh+AeBC65tpeQnkV1k/+Yj/EmkBXLE/K0uMXsX1HEJ\n96lIp5yETbQorUrbuiyUz0boZCNfUlHqHtL5UslD1wXjV/wY09VZqoAi3O3m\n2TdaHQG/nEbtjj4I1B1bxwU3FIgLTROzdPkSTD72uihIQRAc/JRyfdZLCoY2\nxu9Z\r\n=xZpx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB1256iYo4t5TEsBtqFbxcgQjDzbD4KVRmbTzPYBJZZNAiEAt6BA5CbNEdGG4yAGVuq4lNvGZ6Jrbl1Apn4657av1l0="}]},"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-drawer_0.19.0-canary.72aa1129.0_1601068004621_0.5591161252874663"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.394fd3f6.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.394fd3f6.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.394fd3f6.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"f7ed30422433da24768cee2e9ee84140331af4e4","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-60oapaAyWElswPCA8zgPWPmImc3rHfQ/MOs6K7yRA39LeysLvYkWh429wMEsFX8qY2LWMhfSZsDmLZKA7wPpMg==","shasum":"090f908637d357167663d8ab866092eb3cce566b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.394fd3f6.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce8rCRA9TVsSAnZWagAA1MUP/iwq5LMD0pWZCJmCNSib\n4gcTW3jhLQIoLML7xi4WcCix265lMi8Wt0Sx1lOrPYxSKglBjn3dtXJ4n1Oj\nTp+rhKYbXiBu6vvPwv/4GfS8zsEy4eBzu9a5IJ53ADFpk53wosShh3yf1dqc\n7KrhTjfYqYIv9mpcy9wpoI0uZBPyq/h8C/tR6byAw/Hv9H1wd0I+vx0a0zS1\nKb2YWrg5FvccHh3CG7wmOGyrK8WYAh2ab8G/mPv6J6UxMIcoT8icaGLKPg6s\nWb4c1Da4Dn7KeYZbH5T0EdTE+VM16QDOmwxlHdpgclHJ0GupDwpqb9SMgDF9\nv+jjxnpbSIEYPlrJGG0pVx9sdsK0tTcOE0yiXVHa9i5s+rbViBPE1S7jsJZG\nhoaSnLRqLhjktYwhY2bxkkD9v9Y7wRqws1uHRRS34HoyhaJz5VDG4N+CFbqw\nQTabKmo6zJpT0VT7G4Kwwax9/CnGB4jddiCThSyvnk3MpKqPtqOGWavTJCaK\nqkFzC0TQeL91kivxwOAIpWTugWCVr5ccNuKoEVLeOBq8JZOR+PmfQz4h+PXq\no2K7sIsEr4PIz1v9ZsQ/6Jzk1dNvEUspXY7otfqm+fij8C0zAaSL3iUvFooL\n1W7nCgf69jPELIbJxx5dklftihXD0pSRXeeTQAT10zdO7QIBgHXcY7C6AHns\n/cpq\r\n=hnDs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbLYi7T7i/zazCi6MoGMECkOnU8fRZfX5AjnASagIi/AIgdLVgf8O5BXCB5OMqTC6iie0Ki9Yim5WJiD9m/rDNujo="}]},"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-drawer_0.19.0-canary.394fd3f6.0_1601302308423_0.6995532960816304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.347110f1.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.347110f1.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.347110f1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b51682018a9a68b95f2c2cf2ebd16682dc3f2e22","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-7TmD8b2ATTsSt947frodHX5pjm2rpSR11CnqTL6Bxfd6vuzqZXKLnQ7q04hmHhklCo8ByomyvxWQNIR0TSCfzQ==","shasum":"0c12fcad9d4c25c9ffe82672eed99b3ed42424da","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.347110f1.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchQmCRA9TVsSAnZWagAA+KEP/0R69wj5mDP+Q5i8OE/u\ntPrXvPC0UNIiUpxhe5hw1HdBalm0OE2wCVuzYjSVQ3EpXxy43+NHv+XuQSNv\nj/EhSp/JYidNk+pnBv8zYf0ofSuNkTyu9+Oc95nDP+dLsWVrYjbx97DyR2tg\n7Y0ldWgX6RkVtow8sIriapCpVXKlhhiUtxuRTh8LYOyBHkmLiNzNfrFENzRi\nkh1RxHfMl3ZqQzvBWIY6YRQh8xbLl5gwLEjEphT2uOrsJnqJs5RqUOfyusgS\nuSyYxNIRDnK1q5Toutoh2kRh6lFIwhDBWHRVfuUfV0UEU+kNbpFpDMn7QyyW\nAgonefO4ljt7pNVDzeOphoE/R7zYeguLmS0TBfXmCYxXLct5Zzsa6/bYp89k\nMgfBgE9uEUQ+Avnpdmgfy3Gvg5BobxbB/5Y0wIbUHggc9PENfOljiQe26ukw\nlCjzlKbiiPyP9SUduSVt+I7ASjcwMri0qC0keTKhSDd2DgBii2MfOl737XE0\ns1BI/FmLQRVxs99aqPuGk90W0R34SQLnbH0BGXcq6kB8Tgvne8YxxLf61URS\n/b++KSEcZhh4vESTcqX7b/37nGBO5KkBX7QJJQry0FCEeyHJCMMXohnB/19C\nLJKq6SeKzrkfjbNEFT2Lmr8xQTVTKwHSzeXwSMl9tsv5eZj3pTDSdrxW8f8z\nvQ0W\r\n=ZXgF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoFOIZhs3gfbwxSZ11i5+QEvNJRmMv5iSdsquFnBMfAAIhAPHxv3CCl6jVE9QeumGuRIN/XY0EmcZbZ/qQQFmPajIi"}]},"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-drawer_0.19.0-canary.347110f1.0_1601311781805_0.5723682932453131"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5e330bb9.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.5e330bb9.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.5e330bb9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"edd7d263d4d4dfba81c2b086b08b2be10b533b2b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-/lG+St3O1D5NT30NlHLhN1lPbgSs1HWaYKlO6gmO8tCHFE2zqu8zB3k3lPLqrtIN+HMd/LfqsVLaIpLrMEwntQ==","shasum":"2e5ad71580d7c008bcfc46ddedc5ab55efaa2747","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.5e330bb9.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQAMCRA9TVsSAnZWagAA3XcP/j6lVeG3IX3wEAftnTDJ\nuD46b6VPnLXQjRSyGGTTg+0pET39wBmMwec8CBnCaEcHgwCdKdwSplNnWH15\nTSbbda1X5o5VGBzGi1ApCyeW5xomSWgUn9Xh38Gei10YxT/fpGoNv8RCicCi\nKH3cpfohqqShHoPDh+0gopAkeKjCyrXrgpRF3pZ/1bzLvJEbhD8twWEplJok\nhryzBYN0vxwHo/fSF+PSWTAzgYjxjjwi3Y8/xzmGZAWFGnODOvQHB8Z8umOW\n4XlgG8v4CIaX1LSnrDihjGzW9zZC9rJE5QHSiCa2hxbzKwcgHHhhZ/qDgncT\nPPf90giI6zOcCN+07TmrKyZEHdvE+CpEZonlMcZyD8TOAB6jpY74jk1AZK4e\nbO6kYfvDffPbrwVZS5dC6xnn3pPzNliYmPZ8ZF0HxAmpgKGWW9VQpbTzaYi+\nmtfegpiMRTKwRY6Nhun3XIPNa+EwewbH+O1MGtGrgnYyanEm71DpYGX96iRh\nDyaT74UDwP+EDjYdb9bu/OKJkxtYNSlm+QPogU2gTEL8RF8dBVGNbv78DSFo\nXXuT/M3fp0OCA4dShsZd41NkyJN+7rpOgK9k8TfzAi3b9q/VpRR2o6Lpejd+\ngxm0GDmIgYmOKt+9Kw+Zl3xlUumJXARSEpWff1HoCAHGRcWrN3b6nGXZTrMW\nJTpi\r\n=1SzZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8K9yq/Om5MJ6ezEWfxueUiOsqkE43hgd421PPaxKnLQIgTymqo63aFR/0A1KuronhgyjrKg6KRaE+1P8PITRw5pY="}]},"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-drawer_0.19.0-canary.5e330bb9.0_1601503244060_0.8182992369029864"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b9e3a9.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.30b9e3a9.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.30b9e3a9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ADTKetzD34ljb1i6tuPALLJu7s8VuB2Fq17oCDQFFKwM+/Cu2/4V2+ZRkHgf3YzzoVRqp8oN7s59SChKEn3/Cw==","shasum":"4db4d09aa55384423887b725511456187f4c08af","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.30b9e3a9.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQi3CRA9TVsSAnZWagAAtBEQAIUr2WO3vyjbNInkkwA6\nHh7m6WTpXsBwiOY7RRcvDIequX8LDVjubMRx6hEgfczWJ8EeD8kBOnLfErX6\nO+Lu+2mtQtJUgMie2Y7HkQmFftaBjGw6LZNep8lYuiYydb3Jj5qNw/t0LbcE\n1RAgG1WZ7ymM0khNvkn2cwesPPCJjli6cRnv/CDETqLC3WlHP/wnOTK/G9+h\nlXWsyeTYPzMxUN+U0ULaZKw2v7VeXLM+EXPcMigZ78llPiHP4Xo2n5YZIGrr\nB99na7uztY6fGqF6hlImrAGyJ0Rl6uXYPhJxVT0yrAteOf+y4uaBh9zJgPHv\nU2/4JwbuvniTntowgQdjJIUjsYdw9UhZM841zNeV3IYYi6MrLQXC66DiwEKu\nlAUD9LNvW/MybCnUOHKGvItYS0mATZntQdSAOXNJlVPVo5CfeE1jnWAf+7bj\n1GNvcwooChTKzIt7FYVIGtSla6BV0ghkCvE0GYhHEvbiHOvy77sZCk/wbMuR\nTW8HrElA2gpjI40l6d9kqraJ0uOC01sCMkFzMhzlMOO2Hce7tkd7e369i90W\nGdyI+YZwoXDu11QbE+1YSt4vqU/NJmCo4sE38PvIEla+NAQzNiM4GC+ST6MS\nT1h4orEZgYyOKN5GRgX4ezMxuO92yirE0ujVtGrFu3ZUU9o/YhdorTacFpa9\nUAo9\r\n=aIxn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLqjYnUMsOreZBBsAr8ZP1d30CwG42aphSKB6nbLRlhgIhAKQN4ILADK31FS9L6rzcArY3zmvg2lKQ7bVH341/1vU5"}]},"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-drawer_0.19.0-canary.30b9e3a9.0_1601505463321_0.3316929547210312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.7bb04b9a.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.7bb04b9a.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.7bb04b9a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"f4137a832374dd43b862ca8a4db665a59c1a70f7","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-6fkqDDHz7XZS6lpy+ftdAt6+A5wUA6t1FFdWDofxCBz0F305NIBqRwh+04tEA63tY+szmqvdhZaxuyBAGn6ZQg==","shasum":"d503256bcf904e09d396a3d28f2a70d78682fc51","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.7bb04b9a.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmSwCRA9TVsSAnZWagAAu68P/RPC8RpkB/XEtZwkHNk5\ng9s/MaW3c69CmFhtrReM6iAeEc1qTsvGrEuZwBOTSQIC7APDbm6bsDV2j2Hh\nIu/iSWXXYuDyQloqKBdA+jioAavTg91Zq8MXY0RbWIvM3z06u4U0TJdjRe8I\naL1LxRGKLADMS52lweMX6Xumy+pRjriw+fwhhvMYRn6q2m5yaszA/ICRI7Sb\n1GoggdGUdpnE6NwioCGtB5I/y6fbF2rPc4N2DkdjGei71xlooMJG7C6+Nx0a\ny5yE/sZSK1SbDlwbDqyEbjlKacPFv6XuhwlXKGLJspn2hAp8HWHiDeecaLpk\nL0Ug3xF/IynZ+ks6sPaDbfODuVhqqGvYbtst5kpfuzBHB8MvSW81hu+0V1+c\n3ynFPQIiAS47ETjKq5C9rLWj6gxijjIlwuVPdPilSsJlErPGzcSx5D7YDkSY\n0R0pFTpC1BNy7IoAn8fCWnD6twCOKMXyrxvsFtwQ/ZwDwj0H0Ys02eJySyMf\nh3oZL5nhHxKZZ6WU2UWsBbrlOMxwGJyW+nekapwAwm88z/f3kNqwmRQNMJF7\ns/LmlHPMuZ2oP2JgC1UcxNQr0x1JkcQC0ktJTx/ciY1mPOfxrzm9XNbjjKGc\nXdo3AQnaBLRlZ5Dx3M1j6EL2/xvbDzw6jvWaJoNRXuPHsKUjJJRFqulzUpcm\nLWGU\r\n=ofIK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAig77psbjjkoG1k+Aez6D/qWljYKHfoJ0YAZ0aBrlr8AiBHNN7fRhjArFl7MxM8Sgwrl/Qr81wI7q2aMSaS8gmljA=="}]},"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-drawer_0.19.0-canary.7bb04b9a.0_1601594544070_0.19341105725334784"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.615d861d.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.615d861d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.615d861d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"31f7a82757513b3944c605422e6c70eef13bbd54","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-NL20oWfWYi8MhEk21bvzZM0m7/TeER2d3u+n7xR6R+eiTskp7leIDmjHIww+o7LuqzdpnwfhYelsMcGCzgpu2g==","shasum":"5904793785c9163d16d7ce55429a964fe2971d4a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.615d861d.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoNLCRA9TVsSAnZWagAA8UAP/jup42hU4RlqfTN0anl2\nmvcpuLcWxYALKYVXkMNdyekEep6EGX1du9AB5H2eyXkGpZ1jQEEf3EBTRfye\nweAmmJgMtgX9zGlF/vUcpquLBdwqI+mOPce0+TqDZv5bAHbVRFkYmPtkD+A5\n2B7XBDpZiWj7lByarDupBK+rHopwjg/BxUr+Vwi0yOWO6TxZA0pZ3cFTj9gZ\nZidZBqHt6dSE5KUWvtNreIJHnKAje2ipO/Lv1BCn9Y5tBzdpSZhL2cgLNf2x\n55nRUzGSJDqRllOOxyzcuz1i5SNlOKDYX9klYgDPdcnpR++UO2pfRWs23nPJ\nvcPeonsqmCkb5pYva0fdyBN8gdu0CG5w1xiClJ1+USlu+stvEdSv7HmbZ+eM\nXDjIrC6onT0+0hKFGfd1dF3GoWVrfP3ZQ3IG81Ol9elggdwB/KsCfs5CICTq\nc0Jdgs0SGjxVy8M5OUUJLwT6RripJNNPTuq0/bI/KkqdjJgjCfHtHqs+yzFJ\nYU2Fj8lyPWIihG7zAQFNzeO354n0zPK8gqaBaAthxlhvzXEcYefuBLbJjyaP\nch0uNGcYiTdCcZ8R9xs9KNUMEJjS/0GqJjuxk6Obn+W5rW1ccSy182QknhL/\nfUiDMJfWVMM9k0m198PWPWdFid0g5IHZB8FDIpXpGDBNLL64F+7MB/wOxaYm\nJqKV\r\n=1fov\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCH1c8T+IChqfqKgqIZzO7RE6Y1Ay2k6SnJL2KQPm7DgACIQDxVPK2rVJjWTCRQlbcrVaYMPU+xYLSi7Ofrabur0633g=="}]},"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-drawer_0.19.0-canary.615d861d.0_1601602378538_0.23294108894530252"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.af110e86.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.af110e86.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.af110e86.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"ec4508e75df333e18bfc60188de82eb9e90a6d01","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-yf9nXIqyzzGcaIYSIrD9ROcwRKXjB3LDY/oGXVkY1gGSpviaOMR6KI7TU3JFo/Zp094OMr5xzxQK65fbZkuCNw==","shasum":"aa396650c9a695c46bd23df814f1686f1f0c564a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.af110e86.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7yICRA9TVsSAnZWagAAcMsP/iQN88AB/cJqLxASpIcu\nNvw04rm39lOlvn0IKnd1GDkFKOSJ0RnVo0Zngc3tayveMqzzXYR9NlXWsQxD\noesvQ4NPQ9CxvIbbVh49ZKNqObDIgJ56VkKey8hlqU0iL70UgSEJeD9PW7qZ\ncZIeQx/qJ160Nh8iJJ5BOFvjX+JDj7bssmyQDQVjP5MrhjlvomXuFhXwm2LB\nPrTume065RdpTp7L+oAJkMGpnz3OZSjx2LD2vm6Nqa7loHM7kJ1om7f4npB1\nf9xWntTFoZurs4YLjAmq1H9VAktPbwY0gs3jsBYZiKT9i1QU1qR6cHpBw6uu\nvmaaJqVZKPl+IGYdghycb8AzNJ/GRudlpkTbxxhOD9Me6k7FJecGhkiWlZhM\ny+ZCoZ2J4tbJi/CdV/SVUt3Kxg7cxI9HaIO/V9tRkER5pBi5AuQvsAXADFvt\n+mXAkdglYN2z5JGqIX/UqLreuGgCFLuJtJ/fI+A3XhPbE5vMZlaQnfNR/Afa\nlbFH7sKaNGgokHgMbaiJBb5/lfVQj8VTni8CDEmoZZknePCbnwBDrmPdCvzK\nk6Q1zmaJWIM2F6NuSFwO65wOVPaHb09CWxY8hYDwOeqtDaRosPtOI9fe23/o\nnUpgxhmTAqS73mLL8lt+4/HAXnp/WUAnzzgj5juns6Wtt8eu2Z6B6KVS0UrY\nvCk2\r\n=Gr99\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRYFuG1QfC9HWbX400/R8FgeaNxN5L1jsx2Fwtz1dIDgIhAIRG8+XSVCijyel7BkBt0wCN5hZEb1my7nTCA01CBgSN"}]},"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-drawer_0.19.0-canary.af110e86.0_1601682568105_0.03476547089702042"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.89d27ca5.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.89d27ca5.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.89d27ca5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"fbe5db689dbf4abb9f299c85581f7fb95f80ceae","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-sTwJuIavYroCjRdqtHV8MEKLpmxwYaTLjIh8qH5teomuIyLTF8N6xpLFZTb+hM+a9FGry28qeGLNf9E/9x9xEA==","shasum":"991fd2cc333b953d152bdeafbe152e4038a15e3d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.89d27ca5.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8fQCRA9TVsSAnZWagAAYTYP/ioXFw08G8MlgWf0Nf0E\nUUM2Ky7lM8lv3+FBn7zXwSxRONjwONd/sKaxihwMQhXejfaJSp8zqXGNFOSR\nM/M/Ffd/V2apD4sbwsZH9mHe2k+Jp9kxn3yZ8Fy3ITXTrELhqzJO0qhN3QYp\neXdx8ZK2ggsjfJ56jl1DNnrDmRnxvpe49x9RMVc2x2jawVJV2w5058MjLwNS\n5ubsMGW3+07JY01OcRnDYcezwEnDQnfiDvskDjAtDrmNuEbKxehaR2ewu5lU\nQN4+c0muB27Z9mlViGcgRd+P3EcO8KMNyGifdpwfxWJNEOhfxrHkpEBppKsr\nAR2gfMsVLH/N5J95RuruZaCzVRbu1RbR+S8lJ6Jvb9awTHc5WEW07laXMX6T\nfivYrB1l3uZ1SKQqQviIa9vF16epcqohSYvf3RFFli9XmuwgUzN3xcrVjNJA\n8Domst90/W3b1iWj5wzG45QOGUcnNonsNwiIytuuds5/99XHcy8RHA1ZNJXN\nONFcuFNY7MyXDWMp0ovrBwdLiIAux5O/D406TBW9Q6Ms5fXByCFSFHUemZxR\no6yWau6WUf+cc3l1wO9Xh76lvGgU8ETDIdXk+2dVnFV98T2MJ58eN9nGGlAd\nX5tKO7jpOVhNi7rrpRj+qM3TKGx+gvObzdToiLKGP0zgLhZi8S0pbv0wwcCe\nUiLG\r\n=/GfS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBV4jymGxT9VErOp5wb4N2Dt5WMSEaTZEtkRZy9oJBSwIgUrs1kcnkDX9+kXYPEN9TrCRR7ppFcrI1SWyrO33z0Vc="}]},"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-drawer_0.19.0-canary.89d27ca5.0_1601947600452_0.28441375705935923"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9ef2e7c2.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.9ef2e7c2.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.9ef2e7c2.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"05ef0de8978ff84725428953056488d768d115b6","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-E6n4qRdieXUn6fMowG4k72fyLhCMDjTIGdt+aEyIPiKniaEs8PE1eFeuRqEJBYt7g8IL1AoEKu9mCflK0vNJpA==","shasum":"de074114b3f8399a0a44c01a26b1affa9885c28e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQhGCRA9TVsSAnZWagAADCEP/juw5RkFt6uqASnpSh7g\noz402MJguHEdQPjfhX2+OCaoHvtbK8bxB/iXnkCJOV/GzqVGFPh374AIKYJ9\n4KzJn4Cs36tk7MoSbz9WC/UsShGnCUm7etSRJSyPQT7DtMOjcpywfAYzfcjH\n/cR+ZNkC7mJCPHPhZ9WF5Eo7c2Te3IdgHVmEfxWMtAKrymOM/muS1vixv1/4\nSvt0gPLrijhlSA46Z6m6vNVNAhMiXEdoIXann20EOwbGDSuzli9N5zPP27LM\nKtnLcoE5oXMjTHhBk/YnvencmshHA3QQ8AFILR5MeSNJMtOG2d/3bjDeWkFE\n/xCvB2edvfX0gYs5z4K6EmLe/0JVQHyO1VIrVrc6Og2LSxferRTKRBI6fjnF\nlzHBb7AygVXhWFqpxcLmEhqNBuzU2um7shfsHaFWyCDuGWbb9y3MNoCQJJut\n02f5w+YfAPYkVRglFkkPLanMIMV65+1aj6XSUDRFtPBVS+JD1qsbj+IxDAaa\nmOVhexSAzh6hjOYUVNBnnLaKqScp2+dVKMm5ZSFu8yxK6/R0jRkyVHCX5Z3G\n9L/oOK7AxTQ+rNQ0Zj6GALzM0xvvsAj6j+C3rqRaxZm+WHzAR1PZk1srgyoE\nRguFICeEOGRUHFnJhJ9zwQMSAcJ7OJTaZ8Auw8PNqx4NykXFFNXpVeqWs4Pd\njSMC\r\n=bRtv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHa/T3xblMh65woMe8u+Jli13yMjRyYjtWrRpUi8TX4AIgf0Fli1BGeB46TXw+3m3wkCEc/G8X+zQ02sPw7ew0dk4="}]},"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-drawer_0.19.0-canary.9ef2e7c2.0_1602029638100_0.40705859849049575"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96c8bdc1.0":{"name":"@material/mwc-drawer","version":"0.19.0-canary.96c8bdc1.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.96c8bdc1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"1107015eb30f3673820101dee6e42cd62841721c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-S2cMPiirDntMYqpFn+vl+dy/+kQMJikG9GX24zxl4kqDn+A88pf06rf3grOs3lKCelEBf9glEPDkrg5TF0xaOQ==","shasum":"4d137a5d4944e5f614c57015c5314f28ce02728e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0-canary.96c8bdc1.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffh/0CRA9TVsSAnZWagAAkL8QAJ14uYanuswLjbaNW4dz\ng1PumZ3M7xRdCTdgtyhuImnOmjkABwnP97hbvaVRDF8VSGnDq0rv6uZcR2TG\n0DmG9xSrAxsC22owRobb+q8b5kH+WxeW07T+gNJAm26nK+kHHLhDo7jGxyBf\nZHgfzDa9v+xZ9ijX9bOD9CF+fWT4a+chQxyJpJVP+5JC7gUOLWlfil/0pV8Z\n9OiVavnvqWVCqeJeMFAH5Bv3p5MCd/io58+AEEFTWB28jEJUxWT7/gJ3RaWt\n3fApCcih82Bly/3MhMlPhCYrbofCVv861eJRSBID8TCCRpFqOCB9n4lf715A\nB+pX5K3gnD46U+sni8N6Cq7/CzTZ4Tt+Gc55OXR8qiofgDyaDM+KIMH8X4IE\n1isDg3GI4gTkuG2+PXBItbDDYWB+GDa+lN8q+ToNj2c9LB9ml3Cl1BEc1T45\nSRtsXyI4Bq7yx++iIEciPuUOe2PQxmb4+7F0YGWwsJREkk7pH4WAylGym614\nrmKUnK1JzIAzWwjxk6FABJyRM5dYWInTbe6FWtK5DMGACLMinJ+n0bQbWklD\nbkHUN8/dYq/F2sFTS1R4kq7bN5gZ99e48ZHZOLXkLHQKxnVECTtUd+5NA5Oy\nvZ7saqmPSCkFTZfQEOnnr55yF48id4AuBHFgQdmRWiSplpy9mXbqm7Lq03Dr\nHlh4\r\n=GDO4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEJJYTcTij1sGgCoFHXU8FsqEP7/tjwhK+Nj68I0NUFHAiBDqvTH5TXa8t2YlyVAGKGyIUwfVddAMCoOk9GLjJe6lg=="}]},"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-drawer_0.19.0-canary.96c8bdc1.0_1602101236390_0.5290908689753069"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c21f034.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.6c21f034.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.6c21f034.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"367e1d2c78522b5c85dbc2693548d691c8b84d59","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-YImvQ73vl4WFLHy9Bny8ubqyMhOU4FZGduu4X9/ZyYpbYqNuJDNOoH0wTzz+T8pFY0302p+1PODMrWra4HcxjA==","shasum":"22be4a88367ab651451104d6e3ea2c9e43ebbdf3","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.6c21f034.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkFwCRA9TVsSAnZWagAA3PcP/3ObMnWjFjcM8SojcrFr\nsH0hjiYwaciPke1pAoiuDCD5P72xH7xmEvvI5ekNPYdlY5m1COLrLxutCE/b\n4Mq6b6guMeLcKdZpvE1FoIu125FuaAS0Uk1vaxUnYplZgd36JGBnyXkXCJAS\nJD43Zj94990sHadvZ/MoWEd8b+Qug38CEawJe1saFXp0pXOljqdcRlO8pXxg\n+p+0x32liVOraHUwiWTdFdQBd5VWpoann38BxIKhFuISqtYju7WtgCyjN4ZP\nfp2mG4FSpiEIAkfBEtGq0q62rwBzzxvkDpAoY9GFFvop8seER7ftaJl3en/c\nL8zmRkGrpxmXa421MMeGdhOCxu3T9l8O7v6+eSaEUKFb3N85P4jXuaeTyzmE\nwMI5t7A1hAuWOQzILRE6n2a39B9v7XMfrQMr1GakmziC9caOHG1YqOYLs5CL\nMFozRiM9a4yYgVqcHTUNx+Y8xSXq2w2O/IUccJhmAYhIqJ+6DvGffx6MVaYs\n6PcQzOLdxKgTgjEeSFBiEC5bZkUAFnpKWpO2z9Mxb5H5cbzQSCTGV0+bBgHY\nWYs7jewCE5qfLaBd7aHtA/Y1MfRxN+v2e4klA94XKZOGjA6ARnaqHMgffu4o\nnZfmIMqV+yun5auOnmb076dfuDqBaA/GFgtTc3CiiHG8LidW6DRDGgL2/C1P\njEFG\r\n=5reo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKx6IRQJzvshFFJRWhT8F4zazZ2Z5PY94UPEsgFu7kNAIgUN95tzuAgBYXWAh214x5+0RO3bxwm89wiwaxHLhi0XQ="}]},"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-drawer_0.20.0-canary.6c21f034.0_1602109807970_0.23646392716828846"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-drawer","version":"0.19.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@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-drawer@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-A9NcfPdCfmOhEFP3axYrJwbgt8RkIEly9d6kErhK2tLiaTyV5WDM9z0TiX4WNBY+SVe+YZzvVyuDZoqpa2exRg==","shasum":"4c533ac6d45ab2fea00f443525312eddd2c1cd48","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.0.tgz","fileCount":13,"unpackedSize":56593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkIpCRA9TVsSAnZWagAAfH4P/R+LLTJG4ZiWNGUKJAOz\ndDW5LGQQEtZzIau9ADVSzm12RwpMcxsRfXmT4sttOOPnfXBzF6eMFSq0Qj3P\nQ2QRwHmz+nfqefuY3MGdg1q+c7UEKdXnf8vTsZ07JZBwR/zIWsYQpPj6Qg2V\n7Dj9bTcmJqYbQjA0QTtGcfBX12e6W7sDUqYXV1rJdz5EbdWPMr6Mxhn9Kz4M\nAPl/GzemS2FqcQ4i+u+wNUG4XYFREgDa/wb7bI5W/R70robgxCi+9LuWpoiy\nJUMxyFzQW9U8Qbz7xRKQpJPGRTQeDwtoOWoxjFGt0PdtG055VHOGdRhCz90+\nRGB2BWiqHBfoXt+pS7OTEJA51eykSoKQMSkSFKzqWNueSf/nSAxYRiBUInFL\nqFsE84HdFclYMjvFWtKGU6NQJh0OPXvI/IOaM3ealhfO8z80djWrLuFulJPQ\n6MK+v65PDiKTNocJvFofyhv0NgDbqSDkLnJm0gnGaRHxJooDjZY9ol/Jm6He\n0IiX17fQX6NYDQON1N5+XfE5wCXzKldFsZOszcG+hA2dxbyHQkdQPwDQG8mI\nM08sGmkoINybEINdXWX71NM4aEcfBrELXk3gycGPkT5UJ/TmdF78id4DMT7G\nwoIY4ztssWAcJdirelfYbQZBSrymksCBjmjWEg4IfXw2uX2GDYa3GuPs+yPb\nO4d6\r\n=WoKB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9OO/gkLd6iOvfcP2XR2BtAKQGpbCNE3sgvcT8Y+JJQQIhAN+oSrtF0mFFqMUdq8mKjinn8C104AKrpcft/wUnMXu6"}]},"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-drawer_0.19.0_1602109993488_0.6830600984427584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1f026aaa.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.1f026aaa.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.1f026aaa.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"3082455321637675854584edbbfeafa95d95dd1c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-sWIExrFZgy2IGPpSjhZBIF/G6ic8QjTHcIHPRhY7L4qEA7MDLObMtXoXnEjbMtn2XEUZy0haiuzky05kM3YN2A==","shasum":"7fec83b686691418449fbc0911ef32e0bf53852b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.1f026aaa.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5heCRA9TVsSAnZWagAAOj8P/itt2n4liqW2jFtGgUOg\nEYNSewAtGRNSxUIyGJCwgq6Jh7TmNs0XOxLOypLLkSCwuQ6CRtqUuANuij5K\nqHR5iuqfVaMKOncX0tdjMq+7B6kKx+LNU6qJ9L4L3GnPyqm/9nXqVQU91knl\nJyrRh/2J4KuirpWcDejzxFxIHvDyP+JAmZOfQQ9lh1fAd9uw1tNIpJ21vS5Y\nLOSdX7Em32HvibMKmV5Sc7fkPmDqKd6N+ccBy/U8QoZnoOFMlaywDSo8Fs87\nSl0cFTEp7nsmmcdbYfv/4Z1QMcLUwYFa5pFKjDPO1fWRc6hbTK4nCD2Acpvo\nNYIGZA6oSDFjGVm9fdX5fUYmMXHCci+mgjgu57P1pQ2fPA4pwvbClKhh14f1\n2naCsUp9l25nmnvIY9CZfK7t45XCrA2T0aQ6X144JHC1ZH/adTT7yZhKzi9N\n947MJo25TEjgrY7usXdDJs/Da+FS0svPz0zSORSXQD3PQvpssdHlKpcupZLd\nhNOoROb+8yG/ojESMsOhR3DtzEOyPoywbsFbYH33ZIt9vdZ9lt5+EEMgy9SL\n/yHpS1w3F6bt9EX2zV8Lu7tk2Y2EXzqKReY3jjVXk8VaOA8Rv4aCewMjCy7I\nLoCZkfO+ZGiW/4kPEDncQfMifw7KZN+6KoyZoCP/Ec0xt4QE7SK3FocIFbRE\n4O26\r\n=gEcw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGSb0Uck7eBjkkdCA6I/W8YkuQsEHDIUPcKQjH/1H7IYAiEAph/1MPoLc7lfKfd16uG7dPhFRR1tCCWfTt+g5b3bYr4="}]},"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-drawer_0.20.0-canary.1f026aaa.0_1602197597598_0.3248970463154681"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-drawer","version":"0.19.1","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.1","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@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-drawer@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-M8jCdZ8QVhPR1qERdr7siEULHsPwE+DMQSHb5dDtJdYho5Qog/beQ2J5iSl7p8fbYqTpLWgxBoCKPtcLXFShTQ==","shasum":"b14eb528f50fdbb2b43dd2f9b6e257ee20511ef3","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.19.1.tgz","fileCount":13,"unpackedSize":56593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5tGCRA9TVsSAnZWagAA82UP/3THJd/4/hrLzz5nZ4OH\nVUJzkYDC+0ruswvwkjUyNhW0Zn3FtrD7ttQOKC+3RpudUBoliYvh3KcbGyMR\nAFAukcCaBAihuSftvkhQhbmWLf89K0hz82n4KT2c60PbH5Rc7HtpvpQlZj/n\nDwWBmiNMb3Vp0FfnnPE5hJtxjoQkYBsGV5BmfB7fX812pLbLRmn0B8f0RSB7\nnoZ+FVI9cqKxfA51L5SwCDSZ4Ck+djzmFD0AR0etL3EP6oQ0UX8iqPukiL8n\nl9DjPzo+IZYcAYdZtFPtuutxUyi+w10jsLtXa6CaEJYGb9UO9rFErlhFGwpE\npgnof0iAV//azHc78NzKWa6/rfMF/iurK7FvDllb/GOoRaYSGArdU7OLwNvP\nFnWsYPR49zZHU+hSyBKyKlSifMr8DCHwyg4ET5AIH0G4M1uw0/aw9enAiwMD\nvUx0FXtT/3KQLHS8bmpEb0DHk0jAPB0ibtVU5fyTKDa+z5aOQDlrQ3l3kZsx\niAXDRumb4Anzje2WHCzvhnNClm3AyUrNbhyNTnX2hhCFgWSHw9RLIzSsfFM4\nj6hOtNFMIFJ6EvTgPUftd66lb82MGWk3kaMZfQv6Kwd5PEDsSOW2wvENvuVJ\nSJ9I57wPA74JCpGHJDLLlyu4QN3nDDIiRuBnn5t68HWqmli7w/budSKAFe8i\ncv+G\r\n=xY++\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYrR8hQ/1F1P/jHFITgg1lzboIITDmUmrnUYb3GfUVwQIgI31f8yHovqxrkDS2y9odi/549ouri6+Y1fzCfrOLtIw="}]},"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-drawer_0.19.1_1602198342222_0.08217406629463109"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5f6894b1.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.5f6894b1.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.5f6894b1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"63718fb08d28bef1d0a9044bb2ae8026b49541a6","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-l8m3/k5PWOx4pa4zpXQVtU0B0h4qAWaWrrMQ2ZpMuH7ur9+bBO7vDW8xlvnhy7SvPKINQlZAMLdj0XZEP48zdw==","shasum":"649aebe475fa95d8d47b0ab51f4214969ca28621","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.5f6894b1.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5t6CRA9TVsSAnZWagAA7EsP/jP+BkJ8u26lGW0GyeTU\n6ee7HqthuEoXOcfoZlkqXpxWAPM/J70dOkWsOHNrbU5+GrZJ+oOxW2OwvMrV\nb+kX6vhBh7j8fmDGdhJmeSy2gM5/Z08+ziagnyUkJ/3+GTrpRWX2NSCG7QqP\nWAZGUTivKqLbhRTNNANFcRrjczzARWWWd95V0NUcJrGiOFx1T/ghHEoADN4n\nH5pDxmWw4udKHvExw1O+TPov6jZKNx20aklsvcKj8PhsC7VSZJKioETAjOZE\nZVOHBXJ83fR6HP1fDlaDH/z3JtYLA9HmGEAAemGGc9b+Gfn0SyPC1L53H98i\nUsX4M3ccSIQuL5jbH1/so2EB2QVcEWMjlF301X6+d/ArWQEXinsoCRMgv6kv\nWLuKbtjpQDZnUQKdcPYAcDmB5zKJfPLTahz5EIFU26vrDhEYw+UTq+F5aqiu\nu5RKZGnpy4p9tsNLbkbbOlA3DVjvJDIcb6O1/Yfy8mXmQWJv7mOyqODEECER\n7cEP8wBLWboD79hh+Wiv1ZkekQuXYjS6f6w01WvTJK42pJ2SI/DXPol6uwJ3\n5roqbPCFY24X+tsmTLwVcGjkgFDScCB4u5aPMjkwwZYNKl+trm8mylGLd3LP\nTh505jEOcKniuoS3TYZpXBHa/KWc/qHg25/zK8MYTSseDNSv0cvRN/xma7x8\nqSmR\r\n=xBiW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGAyEDoseDsa8nCWdEZHDq5STPcqa/mzirLc+wijesHrAiEAytJJ0iJx7J4uHCiLqoYy5EJAqz8lQBoJsSUrSI+UXOo="}]},"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-drawer_0.20.0-canary.5f6894b1.0_1602198393670_0.17617123928716838"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.f6260d06.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.f6260d06.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.f6260d06.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"d0f921476509811c1109c8805b0eaf1e5cbb3218","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-iPxfN2KXFMOO9AKvc5LothgbN9rbtir775/ejYtTE3h8IAT0Vi7UvsNUQeKivHcuq8iDmHZ3ox4l5w16DXaGAQ==","shasum":"758a780eb729e99ecec2ecd9f9db57dfefef6e20","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.f6260d06.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNnTCRA9TVsSAnZWagAA7nYP/2e0Rcd5kFFQWu2DZ0uP\nA7D3xdTu7HtPeSAbO/e/k8ctAiJPf+uzkkSEo5lubBdpQxgYHS4bX1U6SAWc\nmzVsJKzcLZcmTghz5offAJe/xKd/mf19epXt+6+ReY7whRnI+7O5eyZcoii3\nOxqFghOJgwF/gTQIc5m4irXVBOKxq5BD2ZyPWv7dIf8lqHi7KEo6YEeKtMCt\nzMXlOJY9Im3R7Z2xwmJrnj7T2KOZ1G4XtAuo274NaHWAhbOsIjlQOCTTUbO8\ngzE8xnyyZUdEL4bZFdLpkAAJ+yk1AQflUYPdOlBYbNfbmH7lKz0bdSLOmLhp\nhBVaNI9UUBvTV8UzyCW0S41AqJKFclhkwEcH6PUqG0MuEq4gdnEoQHIKqEd2\nCHBLfP25rKgDalqamQAaR7xCrKT7JWU0Rd6mMM5DEYNEfprCtM4L3kae2q4S\nhZ71zS/VrgxskjcvuGzlkEzNIL+AVo+TUW+742I23xMzYWFMnEKtO/bey+vo\n6GNatzrDAKgVoK/fLLlrMuMJ2nbYlcYlpiaLVqtVfSa9kczXWPgszrosG5qP\nfN1PEmjZoPQDTMhOpPaDDdhVu8T1a98dKff3mNy3qf06VLPs+HDL3MnwC6BQ\ncdVz+7F7QL/+DKjCJhzDfy4s+7OaNvnFW8I3LzObcbGZBCMQqMintvovw9Bj\nsZXq\r\n=hM6/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID8+42QBVX1/4P5UbAfTDxoRVrZgOQc8bM+N4LpAjuZsAiEA26tHvpXBrEdz6a4K40IpolX1ytO/AITyZrAQd9B6L70="}]},"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-drawer_0.20.0-canary.f6260d06.0_1602542034788_0.851797823228317"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2d1b08aa.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.2d1b08aa.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.2d1b08aa.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"ecded3a50181254f2caf9e2d7049466e24129104","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-c+veImPFMjMPSzwhI2EIAyDpEUY37mtanf7vhAiDxo0fBt5VmU7T6diISVHJp7l4lZfe4hqlALm4Mb4ZeFO9pQ==","shasum":"7ec2c96e9965133927ac7aea5a9570cf081d7bac","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.2d1b08aa.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf5ICRA9TVsSAnZWagAANEIP/16KrnrG3zRHVJGTuH1m\n4WVMxbNaZVgRkfhka/lSk5ozDRilLABgUqOZNhkuqF1zt/wuRPEHaRSUiVgN\nznW0aPabIzcn1RBuE0EopOE7SlkX4JTshqCMY7oPtwfePUOe5iSEthdMGx5C\nxFv72RBSnMASMx7H5vF+XIAG/q6XfUaXWwRoNjWOtOwJHOGZ4PGdXJo1T6s0\ntO5rILg9Qxlp7QfVb6mc4JQXITX6/YnDLXK3O94YBpnwCxtlrwwMILfCLfM1\n5eIV+pavHBQs2geSiKSQgP7c8RqDl67GASj9TU2ubGsnHN/LzgGMl0LEU67T\nzbI2Xb721J2xJlzmENspnlSv7+azsF/bz0k0dwWobmLPW1X8B9N4VnVgbd2k\nQbcyBVkvtbOFYTOqxz8lm/1yaHxshrk56n+obykbiT1ghpLjidGYehnL8beK\nENIibFaU7lj/3ElaoGm1P98wX52Rf4BAl8WVW3qu5Wgkh2zIjPiMPblgo8Qv\ncGOKf0ksrvxWStj+il2oq/3pV9M8kQkUPnHSCwJIdFIGOjE8NuYlJXmH9Yx3\nzpdmWye3ytipe5UPXitgxKR6n7l/xV6rHa2DzcfhC2b1X+mfUR+u+g4JLuGC\n3EU5XdSVBvEZsvXxBp40P6G4183saUsDP5ySz692JyA6m+BiyEIzWteWROq7\nLalq\r\n=8Vca\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIahYCa7n8tepmCytUy2ALSVkZNGxHv6o86PiRyMbJpQIgTGdffcEvj3xItYw2QMv1LWHTtw/PAZwAqhj9WNS28dE="}]},"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-drawer_0.20.0-canary.2d1b08aa.0_1602616904152_0.5037960597260756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5bd58844.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.5bd58844.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.790ca85fd.0","@material/mwc-base":"0.20.0-canary.5bd58844.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.790ca85fd.0"},"publishConfig":{"access":"public"},"gitHead":"f577a3de2e8463259c7e4a5834fb1873a4bced9c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-DjuxvbLlB1e8GxwFSA/WOZrLaFIveJx95H0o7wMhUO1VnwqEPB4rtz9FKImxyrxRIste8ar//V05oDD6GF0DTQ==","shasum":"de0bba3c9df1041a5dcf063977b9b9f5369e9b49","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.5bd58844.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjwxCRA9TVsSAnZWagAAPRIP/1ktRHxtFHQhizPfo3Yo\ni4+R0A559GILmYT8CjR2Mnc89YcUNluTXjdPmG+4WcXf9ZxWoe1NJDyDsnk2\n6TpZOGY3jZ3PoOjsWP9jBtR72R9WgqU9toCwZMwSRT9HOt3edR1CDxzYsrYE\n/DTa1yVU80N4AOVR9CHcWx1yzoqDxY8o6XQOUFI6DTwbTZmr8qNquRZTjAk1\nu1GKVgXaQsnizAVaqt55xsHiS1k0JtCm5RMAqexfHeuqkYViPR/k6km+r7iD\nUw+kbukOyK3nYbPy1fS9YhqNRJ4y1oPtZwpgU+RlWxT11m2RwVv2e8TcqWfy\nUMu+1CoeI13pfQRKPHqAjz9kdj+RzW6oP4FqE1qj4HlkZSmxRM4+GgoPOcYx\no2ZjPduo6s1VuiObeWi9UEwYR0yNPwNv6XISs2zCCOfRfD+U+Vo+fOn4R04n\nYHisfGlD24WIRacwiPWvlC7xSHR0Gx63zEOG05UAASEKbkzSzMNVkBCF0Gyc\nwoK6d5tLZwjCJoRncGaxC1ICqA99flqN3Xycx2ZIJZeemfl0QvwsCtcAfZKV\nLnmXoSZOW3aZy14/0FF1zhCDxj/hzch+JeckcrukstpB8u5Fm69+mYNJbtfb\nc0dsOb5f0vl6MHnQxZTGCtSDiV/e/A2XGZoVIOKQA1PVXihc1Q7GtIFJeYlo\nX7US\r\n=ifKW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGJVA5+tNoLzWIbIRqIRvZLDzAX2KwZ/+gart9rTpgkQIhAJWwSHknZNoKLdgvVHM0n3fquxjuL4W8dyDGODrlSqyz"}]},"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-drawer_0.20.0-canary.5bd58844.0_1602632752726_0.9940658421561412"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bc846b29.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.bc846b29.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.bc846b29.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"08ef67ebd3aef2e1a1cfc139021dd528a4275f6c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-2nnISehnDdWbel1tdR448hDektMyrakuxR4gxmL1kyizntapqGIkgxdhxOy1XbyG2ZljCu3MaNxEBOAj7z56gg==","shasum":"974bd4eb0bb8c6df947eb98841ea2eec66ac185c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.bc846b29.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0A8CRA9TVsSAnZWagAA80kP/jiPo1yn5NS75Ds6afQo\nxo7SgBwjK/ShjZVk+PyrJrj25NyOTvbuUByfQKvtvimJLkWHKKfKcyHb3Mct\ngA3vYBEEy0tAp2iT4TD5ilvaiiC00kMxyKkSNQBQzDm5yCQYjsm+zslNKQ6K\nVz5S6SatYKqUc3g75IwmoEl4NtcZDcy98zaRRcpZpWy1exV3e5O7Q3RXw6W8\n/E8IImW5rYoWmkVN7tEmK+cgqn85S+LNYW2MzAGFzJvjcKdaDjuF/16kB/5p\njQEqXLzISDsss1mumnKT26xjMmXsQwqNmRopQJFy4Kt5XwpsFplcY94/ZqcQ\nYzq6FjL30vPmfYrAm1fqej4qI4jjKxwsZJn0B+V2gQUd/wNaTa3S4E8snbnV\nAhuh8AbOOlZmq8GxmVkLnRivV3pqmnohDZnuCl3IyrA8F2OBVQW/er7CKF2c\nciOXh7lhZ9vd+gTWwwoYIKsimM14+fmrdxfcBtMyyd87jshVaBWNMA2QnE7x\nf1Rw8Og9iWF+l+EBl/lXZ12fDDD84hFtZ7Qig+r1sMIHGELs3oh7h95qpuSf\nPdcweNC1R5At28IBifh3ozxuPEN8HmD2JMkjFiiDHtDJCd3kP4wQKHwbkzR9\n/qhRdqgT03mZe0x7bcoggDhEJAr/3CAE+vK+sECl3TFBmDWgvsXDtbmHMsbj\nYV7B\r\n=UiLZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFm+zOcP7uUL6IN/m8gYwIYL783sCE2lEtmczeATpNcCAiAH4Ca7u1NvVTG/yQzXvryGX7vlIKkO3LcB2fqBVSihIw=="}]},"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-drawer_0.20.0-canary.bc846b29.0_1602699323993_0.7354621053338579"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3280b686.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.3280b686.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.3280b686.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"b97a59c2fac8d04478f24f297f15106622007735","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ahiGNsYh+oCKvEQn582Z+eyOtKYV0L/O5cJeZW8iakMPb7CBCc218Te86WSbe3xF95y/XniWi7SZSfjlPPYUBQ==","shasum":"5d5c6ba1c329ddd359a5c3a592951e29a0c25405","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.3280b686.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiONxCRA9TVsSAnZWagAALC8P/3Aw7bK9q7ITX2opruW1\nysglYaWDY7fsRH4RFgrPgxV4ItCD5hzAAsMamTWhHDXwCN1Ko732PaHIrH0H\nhiv6Ke/pq+QcKaP7eCArqw2g8msr++J0Xk0Q4Z+iWnEpavrs1LBy4YcLCYEF\nQV11d3bU8y3jNCJefRD3fxg5gNbT7w2ULXg2e+78z0XuWN+nMtNj55/vJWR+\naA9iO7ZRd1MXnaCtOXZbu14+Ddk7+qaHxu2Lhpand/0N3dMFKP+vqpRo50Yi\nK78TYBH2qU/03niaqEiI0HCWqqsVShLUAeX1daBgbCmvmYvU9Vn7U6ReH7lC\nbz3gVfdpdAkKnrGdFIr3x06+9ahXWQuzLC/R9BV3Zfsr0gDKfktO3wdInZ5R\nZXHKVuLhkqr640lhT3uVAPk1eMOVMTKHedqSHuylt5TiXsVbTYGGX3/OZ5gH\nZnc3mW6DquKZXnvLYsU1E33fBvcIqS5oseM61FK3eFX4lAV3n9VhNX7CR0eE\ngFkWvSJvv0jdrdDuW90FutAK7AUmRzooOM/Ogl5//iG0oAJIkFvXj9sOc4lv\n02HNMwi3tyHpj6Fe5xNm/wK4Hd/Bgh4j5cLdkEP3aKHzj3cRw/TqDJ0QFDv5\nOgC/yTe3C2Gg0eIH+Ec51awRhKZL/1nAKpQOqqenhZzea+mbadopkanSE/8Z\n/suM\r\n=IOHA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD16vbfHsxX167QrbVA2Ikk8RmCIHoUiHY4cz36sER+xQIhAMIJ89y095O9QOGhtTGkSocSQGCgbVjP/NRajW6Ome0u"}]},"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-drawer_0.20.0-canary.3280b686.0_1602806640970_0.3850048959471415"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9e94cd38.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.9e94cd38.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.9e94cd38.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"805fad1d9b182d084e682ab7e59a4e45d40872a2","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-cSV1VFUwlIO2CeXKuXv0usRg7fnZOnjbBFE/SiGlXXiT6CV6NEfon7EYZIVOXmqyAwqdU+EfNw9i2JbZLsrzJg==","shasum":"6b37755291a4f4deb0e9d9a62ab720064550626b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.9e94cd38.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig0YCRA9TVsSAnZWagAAJ6kP/jhvsFSSvOtoXrLTcAVa\nbo5P8cEFjoAR8mMEtmqVCH3+sSZSIqcW+3WuGd+GVG7xvgD26M2hohz0iDf/\nuC0P6uszSZOZKa9vOm2QcaR4sORzJuL7YBHlfh2GUErJUQpaeqtLYyAs7o1T\nZtm29VfaBpktwNMyi+E79gMXoyA4ZO4v/ywwAA3Uy9IbwamejmOxqMqzFQRn\nTM3nHQXAM+vyoZIWn/NRrZ+5aObVkMoBivvlUEJLw3oEZFvFtXO6JB4P91Qb\nt7v9MziFCjrofO1R1KDKQe4KBvkbs43jzfIweG33KVQM+kFdNUDSH2mvPDt8\nWKx1TWUSNpRnuo6j3OQGLslzkgCBmHEzwDh6DJ3tbLGVslKhINDBTuHAaIiX\n5ExPFdyeAoC6KxErR/X42VZWxT/dHM09xh4+j6qxQxzXGTZ/6ubxuYf2q476\nz98XcVgHXlW196tOmt0nBdh7POfrmKdjpK/ybqhXl+QGVD0k3mxD/mb6sCFR\nYHtfLLFDhjE6jMzqkg8PbmADFym7p7YseqPff2Wt2RAZUcGzgNicsWAYaIXM\nuF+eSPd37xTEg3/DH7oD83EsHbVd6IE0pSxeOc5FzSp6cvNoWI8FA1xKhuc1\nVzDLXzVw5FouSgqADH2/7c4par22hFO/cYCkQvwBRVIQdFjMu76t98bNo63r\nj0K0\r\n=IduV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHDpfw3XUlS6BYMe7409GO8znW5I+zOaPO/zCE4+FHxtAiEA2qij/mDuTXnv3cW3DOltJLsYtygqLoV4RPFPoc+FkOk="}]},"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-drawer_0.20.0-canary.9e94cd38.0_1602882839616_0.8427981031110048"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4773c773.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.4773c773.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.2ab716cbd.0","@material/mwc-base":"0.20.0-canary.4773c773.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.2ab716cbd.0"},"publishConfig":{"access":"public"},"gitHead":"fbc8b44864ae10f0bb46e568b25bf4de49eab777","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-2/BwManKeporaGIeKm+USlp9Wz7JV0CtK406tjPrQ3Bv5s0kxKnEBiXQUxq09ICVy50Mv6C8w/jZ79IGXRVJww==","shasum":"65e7ab7645c66b1984c6df679d630d4a812dd47e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.4773c773.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfih/JCRA9TVsSAnZWagAAJ54P/RmB2R35E49FP2KojoSR\n//EQgJYmRNE3ft7vIOxHL1UK+xxPeC5cqI09sWIVc4fbdw6PQAfob8wjZ/+r\nmD7jVAJ8VM20RwlXOeRXR63/0fPHErqDF6SRIkoj6Di72nqjWYFGWdsA0Ar3\nS5fHKCHz18ymC9lrJhNU5NpPKWcLGIvgh3yIPM3v5dWsZe0onYIHUiO8NVVj\nqTuvGJ9OCc9N9edWH3NmplJHvCyPtpbEf3XRmiPss9QKi7u3EdDvW20EDkvg\n1Ql3pSf1SC8ExNPD45LRUG6bcr2aYi/xmaE6X1pFTG/tqVTvUVLaBsdSJkJH\nFiPU9ecmH+gALV89ZwKWBZrGHqPgyZJEO9zgL87d1T0OJ1QDN7hNNxBY4oHc\nlRIVnNK+qH2qxO/RWtWdH2bKmFCQAO9cpu/BsJSrfrNb+m4uB0bUeutVbXVe\nMUIqcx4PylLpITnITEbo2X4DdsNgBYivPKx0yCDfOTa2KclBWge3K1QA0EnU\n+AjH5CcrM/pRu3qU6mXIA8dBVDbkdIjvQMteV+iGi/3TxC3nu1VhqBSrzBOy\nK5I/oq9+uLILYzrt0XwODHIf2Ss/KSA+eaX1cHKFz6QIk3w8dH2nGe2eA2e8\na/ChOg17zd7kKu2I/Do7WUa0Dlgk3QIe/G/h5QECt97XKcO7oHLhW/nayIm6\n/l1B\r\n=WrSP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEV8Y3vrnuxaqJXlRjpVU7BVKWSxq88S6yD6DjphnHSOAiEAkl/S4wV10dm2eJyJg7xOKYt0zOPZ6wZJZXv3ft8ag8s="}]},"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-drawer_0.20.0-canary.4773c773.0_1602887624625_0.9019485396273892"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.65787913.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.65787913.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.65787913.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"b21d55977da5e0c291e9fcf3fb992ff4c683233c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-BdQO0UAKraGOw0mzaBezsY9jVaeM0714xwEgRAYRNI4m5JiFqEq2FsnRvmcvb20quAuJ2aY3xMWd2y59AsGGYQ==","shasum":"9acb5fa01fae9adc83d4404ed25d2a4208a988eb","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.65787913.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjd/4CRA9TVsSAnZWagAAWAkP/iPxToucMpm0Cva22E8n\nRYf7s/tsKTWwIdJEBoq+MvrG1rXB/k3DGrmUAQPYy785M/oGGy/o8cWhBblU\nNL04w5Gexx6GR5aakWc6TRNygN8vVrxaFGIZFIKkwhtfya16kQLZyrpaIuXj\nV7k0VmkET7O17rx5HcrQyJ4gwF/jBlUH5qfPU6KLyrHniy3JdJt9Jok2mxKO\nZRePbu9f3K8YNK9TgqyCnSydEhoMRY6bqNm+JLp5L0K0wQQWIO9nQm2wdhwZ\nRHJ+Bp3Sif/sshQE7o0Zjt6lmlIBSGgqmSazwAx8gzA691A8Kge11mmr9DiG\nz/oEK55tzJ3/pZkoVT56pfi9ah7nIqMUaNHJjgf3hP25XdSPGc0wVnYpk/W8\nZQcxMrfrMplsrwx8tfXV5JikGJj4v6wPzlEc79557wdbOKqkAytPizyHEu4a\nE1dHuxtOuKgG2M0tRvFLEJepGzpZapd68oX2Pwe3efcGhVk+/96xH0ckUtwg\nD16C3CboRF+AAH+2SoSS/q6y7FYLqMCAsg1UOOyT4S8ZjZEFdO901HJXSOlU\nJZJcN5xNUEZlXb7mwbnSiEh7caytHuY1M9pSkv+CIoW/u8H01ChgXVwisYmy\n7Y5aS75XoH93muYoD6FdhU6hTO05dO3LzPBwWyDGAUq2AN3tSM32toCeOGFQ\nFKJj\r\n=9U0m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJV6U554fBHsPZUFE3XBPAbPbXqWRwKn9QBi+Jaxb7RgIgQSU5lntkvauUepmulhUdWYMvwjAAAWRlTE67I2Hkumc="}]},"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-drawer_0.20.0-canary.65787913.0_1603133432153_0.4670730256652311"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5485fba3.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.5485fba3.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.5485fba3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"9648298c6a3406f312222d0c0949954cc1e250e4","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-gyl3iq1rlDnahtPnxd9WjyXTxSAvgGnt8OwIVscGBoOWU0IHErG9bhaKo49jDhnS0xUhaREMjdY7cIgHwJ/ajQ==","shasum":"cec8c3a79585f46616fd74b647f2db000f92526a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.5485fba3.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgPkCRA9TVsSAnZWagAA6ZAP/RLgeSbsFvPUm0yKzfHm\nCotbB8tcyXFtVwGZZQT+0BNIe8q0e7XdIu94YLKHRPMNWxzQFdo+r1e2afLR\nBap2tMTDFx8YySp3YHQb5i0nHRlcOeJhhg0KUAV6LNZ91WwWIM1v5wvcr6ua\n9YE9+HKBYma/cMYML1WFDok7yetoPTbvKd0jSh/ujFlNYr+RYOEmgzxYpA5r\ni7gL/pJdLQPC/r+y0lHKW/qjgBQSNZY68voveAKSkYOOZI7FH5id7H8iUeER\nOIH5SBNvfh9LU0GhpszT3aCKiYFjeGVLDUwUknDBySQ40x866/zHF417KxG/\nzR0R26DhE1jaj0NBjejHKFZHd4I1C9oby4XF3BZ92JxSUK0djRj0WM8fxZ5b\nEXwbMcdzjW8VQOqgYFVCKz3XCngxGwIp11or4F2t/lBZwwiGCrMN3TayRaOH\nwoCkUI9WYnWWwdLQ84pxigARlq6lriONFuFygI56tYnD5wK6KJ+AIq1uRA+5\nTq3kK/gfw3RiX2tAXWw+E3Impfsrj2eXPw8+iQ69BaPBMTPAsrnj6y2wngQy\nViginGzwjjoUs/ZERuJlc+5dAEdmcfG6Bzlw7jqcvo1A8JGxQMf+expzhZfb\nPCV/pWLTqYw9ySVH54dQd+JNWOPdOKF3mKacLsTTaNYFHM4HBb7HsDdPRx9o\nwpoT\r\n=T5g+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwzrymyw2iFCJAHEuF0TuvC2VH8qoRHJ3Tiyu027gDXgIgBzDh8T0yxDfWOA+Yp8DzUngeqXA4u59RM9FV1zMZTYU="}]},"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-drawer_0.20.0-canary.5485fba3.0_1603142627725_0.21071858784274755"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a39d0a92.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.a39d0a92.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.a39d0a92.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"c523e6fd9acdd92ef501444da567a8910ed478e7","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-aNlz+GVUW/pGIWu0C323tQB6Vu4bX5g+7t1qC9wwTv8+r+5lmEDhM3C8ymyMBYRUkxN7MQWJRc85k1zgtGJKMA==","shasum":"55cdfd93a606986c1ef33405402b0f9341c6179e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.a39d0a92.0.tgz","fileCount":13,"unpackedSize":56628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0nJCRA9TVsSAnZWagAAJn8P/RSqCxoUI/YM2IwF2BLp\nreE5q3CrmzogkiDm6c/KDqClANgJJVswAcfxhWj/K/h6Yi5TarYtXirBEYHw\n0XYBu6xiyGjf61ePuwPTdqLKO7kCqTek3RMvvHgXBVfM3wtmnuk9RlsZMXfe\nXTQwuvI+3F7acG7I8fjmgbuy9QF6ht/kmneldNJkE3E943yvZv7+ulPW998j\ngFrAuJynsu+3gFL8O6GFORsj6EsxQdCpeUq75z2EAdwprrT7b1nmU9DYgmmw\nCH7yHW6nbpYB6cT78qZzGp4dIVal1xbULtL0njawACs87UvLK1B+6XtSjk+X\nfPIiLk4RNby005z6qMbNgZzz4M1WQqTQ2pDuOAvA8/ZtSZhwjHbFZrWU31MI\n8+r2qhBk3T650dX3vx4kEQZekuEbtrcEaAf4A+tCya0VvcV3mUu6/QsGjnca\nX1v/m6O/CCepyv4aPod58tKZzHH3InJaHqLwHEPs2hStIi1AF1EIeg9UIgvF\nbU5OWCN1zNyKW9OpvcTmpzHgcE0d4LMv8O42aonoOxSjM+Imo74uqYQOnWw+\njGUrrYr3yzvfjy9EPu1AQSbUYmXQO9HJBqOWvCKqdqZ3mkILGey1h4F5OOIi\ndbZYSzTuoVyS2+z2m6fJoD9ijaSkrMkYAKkNAOBJriq6sA+qYsEu5vABtz7f\nzNDM\r\n=+ce5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDm0YHjqM9cjWEdMVNHcoBmd1y2u+P4XHvhkF35TS6qSwIgKWlGe/BxutNnJErn8k3Eaia4r31zgWG6OTuTXQd7VZg="}]},"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-drawer_0.20.0-canary.a39d0a92.0_1603488200864_0.23487206152959916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4eafcbc1.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.4eafcbc1.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.ccc64eea3.0","@material/mwc-base":"0.20.0-canary.4eafcbc1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.ccc64eea3.0"},"publishConfig":{"access":"public"},"gitHead":"d5be869d7cb28aaf425a4fae37a4f61d918dc1d4","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-LSjWVLFZQEmLqy4tQCNBiC/tU8yBP56pQ1pY+EYw1CDdIRcrcXlQlwWBzwrIYukHziDe4Jr3OuVNbd+qP7qkDg==","shasum":"53a71b1e2840315aae2b1cea44c5ce98ae55b050","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.4eafcbc1.0.tgz","fileCount":13,"unpackedSize":57352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3XlCRA9TVsSAnZWagAAxGIP/2kGM9rc87P/bJeVWlmD\nhAcpqFUijUmZwY8HoJ+xsLe3/j66BsMHFyZdA3KjWea3qqdApZAI6QlQjjAM\nMX7iODRfoWXDKxQkc1c1PAL1O370DX71WN2tGQTmksVI+25yM9BMEleKNBNF\nLCeQPp+uX1k/0vgUWhurz8i4EKGWua80IgO3EpMQeA5pjrRNt0D49QX5hdq4\nHi/r29CI5zTOj+kU6PFXoeo/owIJXG1ovBGNaCqj22TX76ebcoj0OiEGlwTh\na9gx5iDitxXMjXEbL+6ca9GwTv1P1DGb0CJGIvfK3nkFcFYJgqmx7/eIh5Cy\nv7XN/m8ZGgwcK/G1dX3tMILMJYeyOTciukgZ6nllhbaZCCz0vEw2GPCklNPH\n0kFuYenKs2LddDP3RqWigLAnxy1OkvTUfMzctynyl47tijkAMKG3VqlwrnYO\n+Ye6mUQb2BaL15LdVkz+O8Ry/ERidmo/i/H2keCF3W9t1x7VaH3kvl7in+MZ\nWywg9W0wITstmQm+XWuGOUpxGVm26B1XeQTIeOQh/ceCyaDRVQWxmT/MtScv\nt1TtbOPgCt4SFh/2hWcy1aEfjF+W/JIV2M/xtDJRY5Dz3RylEqKEa+VhETwD\n5tEZ0Kx38+bgz0g4PeyxbYvD50+nayVv7gjix1A01ck+WK7gOudVEoa6yQjv\nTJOz\r\n=OvVd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFcSR4LNfG94gGL1WEh2LS++rEjXKuG8MLbS18SDpHxzAiAauKxDwOoxr2SMGEMGQg09JsGA5gq41dNMskXDWEp4xQ=="}]},"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-drawer_0.20.0-canary.4eafcbc1.0_1603761637018_0.48418568819467933"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.32961593.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.32961593.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.32961593.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"af0d60d5c2174ff8ae5098ea73212398be59bc74","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-JDMpeNRvL+rwN84Noxot/X5I64TwTzQxLoaNRUxt282dYtSI8mcV+fGRfnUY3Z2nSht/dFDyoRm6N9nggnQ5BA==","shasum":"5ce9bb1a4581b22bcc37358a84a40dd22c77fc51","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.32961593.0.tgz","fileCount":13,"unpackedSize":57352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL2GCRA9TVsSAnZWagAAM4gP/j/rCSJ9fd0XGH8C/pWg\ne2jNsRHc70EAxT57RAsLnzNxgRngUL7Ch+ihFaBK6wOXxC0C1Lt/j5CmkcM5\ncsDLnFkZBP4zfJYlrLKls9fEfc1tIaiRIS5qYLOvkD+r4HeLR6SApN/TAJVZ\nZfpS2Tm1j7dyeadb4Y75Yv0HwzK89GeLkzkqtwX9v2bLtLDEOVLyu1v9juNG\numbXSFOzmLQ5qi2cX7IcfgWzwiP+uWg6WN0XZnnqlhtA0S3Rw11H86foQn2L\nuIW74/gRICg6u3sM7ctmGcw55DXaeoLTc/1dfKQUlVmpuJ/YMz5flOA/UoTs\nTUkpyDcpdEU29IOyJAfBSkfplCzx2fwlulTm9E89BRNouUw23leaSCUZ4fMn\n50Bx7qapeCXmr4cUDtfpYqHs+TT/x4EBCVT+Av8B/Os2n2EB6dgDwjK6qBk+\nZlF3CWBxKtChNp2+vq/PcysT9ASU2ox3JIAVXKYdWYTlUySOzj40LqZTMYfY\nYCfdgEaheoeAGjOSrOAP6RH4mCEFo7YEFLQmcQl9ZpFwqFyOdN+TpIiuVtNQ\nXWWmPLG1vPwq8E+PNR7kRKqybyAkiNaKJK/b6791Vw4NriJXWXTN9nuiUyO9\nrZv/CvLFnHpQc4Ttw/W5vjRfBfBReulalH4/LUJc6gP70w57Cq5sUcFW5Z6I\nciNE\r\n=DwIi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUkP/BWTWcAMC16ftSMSqN6UHL7fHZ36KJLWFftx2K5gIgDJBgVK4t28ef56/E5k3RubtVp6bz5ij7dIbAxki7b8Q="}]},"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-drawer_0.20.0-canary.32961593.0_1603845509561_0.27633399659687385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8e3a0601.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.8e3a0601.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.8e3a0601.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"a21493f177ef3992fcd667ec3ce774d4fc926d7a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-UeGn1DUCTTE50giSonsSmAvCc6Lp0LbvoBeNU8/I6JspAMyY9uKQVbK6D7Z6YkGcoaQtJ89dBTpQ468XDG6GUQ==","shasum":"73492d90de5653776bb81c71545e203ff9598e31","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.8e3a0601.0.tgz","fileCount":13,"unpackedSize":57352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzXhCRA9TVsSAnZWagAADysP/RsD0TneZDwTuIpVvvNR\naAdnkLQaxly5+BmImh6vif9pVCDV0FM0COT0n/c71+bfPB+mjSRZcqQ3m9cA\nKde1v0YWuC3Fd7jnqsfsfb0R8vNnRqm94q0Z/4IupfvnriJu/SdnFaGY+Mz2\nYm6qXb40rgq43CrFuw3YBVOLg9g3GPjvyEcHDUxsBYDyZL6MH7OfTZZ51Cge\nBKc/jxmuZuMe7Bvbk5PtoQmMINaeG9pMWzP+QmVAC0Qb+8lM+EsnDJ0hcn4z\nKFedxG7KnmiU387nXiFBaTet008e5ZRc2aj5jKbvTKTo3A31qqDI1VV+JPbT\nVgAzWIxYWnbHwDdpK3Jjs+l+0+tPoLgbkI+5sBIYxrkb3XE/kH7IQHcro9Xc\niKoWEtGaevS51icX+mAdHuRJw3c7akdruN43NnEqLHdim9zA7LUG9uQRFfTX\nFKlG7Cu7h/Keg9sgVf70FMnMV2v8sBbHfOYb+zMaZBOwgf7oCzFgDYF2eNqU\nYAkleffY9py0kpQJNZXKkWrNMKfk+mCoHamwLgFjF2uso78iJzkHZX9fR249\n1//uln9TZUmK6A3GDCdms8iBNhH9A47PTSzHxd6RwBv6HwxntIO+D1pSKk8p\nMe8jN84KvaDVtTDkA5AURV/H2+iFu9D9QcUkBAVJRq/5ZqEgjrGxoXPiH4Ye\nFZyd\r\n=+Zpo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoGsRaZjlEoZDqbPMov9WXV01kI5hRAvkwI1P7iNYocgIhAJO0MqUz8I9k3Yymy5U7sC6eSex0Goy7ycEtmQqgDVME"}]},"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-drawer_0.20.0-canary.8e3a0601.0_1604007393381_0.8416758241456681"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.178c25b4.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.178c25b4.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.178c25b4.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"80850b707414fb51c8072422d293bc7fea8a6d8d","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-+Y6osfvXPDdNqrt3BHXBhVHxUj4XVYWKWdL4Dv0WTbbvYwRNSVC49t0QNGN22K5ReVVBTpjtjMJVQNizjMTzpA==","shasum":"6a8aa97f3df287d0259ece20d03553e57ec4fa47","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.178c25b4.0.tgz","fileCount":13,"unpackedSize":57352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzkMCRA9TVsSAnZWagAAkUMQAKQvfaJvSP43Qj4YzNPh\nFv62JCXI9c1IrkVQoAasmoYckQcq2i2jSviQIwndQbQOLHXyGnlydi1dTIeG\n53BBTsqh3ylfpEiOZX26La2OSgDneg3yT44cDypxBriLMRi1/O7CdtI3DqDQ\n/VboTPGnqTLpDZ4wOdzFuQUFnR1rx51H3hUNsDuGfGS/f/Y1CbwltC80u34E\nWXeYmAejaHsuSyOdM9wQ7763bc3LzsY5Ym5JUbQ3dP9XrlVWTeSiZx1HWY+o\nbyjQBoRcRiYKalKIjanyHSBAz1iyK3Uu+M7pjR10/RwwQgoVSOsUzlZoDmCL\nkzigTRyolWdYl0IlPg8pv6jU7Te6s7JO32IGsQHAMLPno3r9mLPUDsHZ9ytN\nz6RavVBrvOJ1AK42reDDfknqRQlfcNhJ+x/GHZh5YY/kusf4EGbPMW8cYbUk\n5xDRKph0FdLRg7Na9BQmSMgHSk/hNObTRZkOrUFdAjWPdSgtOSooGjsoYZsK\nwVhWG3+bu1WACBAq0xwfC+7uw/PlV9lrkrqXPOTRX5Ma2TWLQp5LLEq0au2D\n7fW1m/gt19RX+NgHTSVA5BncLMkD7aq2cCqic7U0VLBowSpx9KGqvt3yD4Wg\n/AX5PIz0hiBu/KY0Y7bRqn4kV58GwRhVZO6xvyrecXLGfq7v4DecVu7YOI27\novN2\r\n=ErMT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCI8B6hAK8pdfIIFc80babfL6r2lc2zpciMoTLXfbwjTAIhAKzM9vVfbmGVgCju26sGmB/r5QI20mkHlh0rCGu3++wq"}]},"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-drawer_0.20.0-canary.178c25b4.0_1604008204112_0.8503604610374225"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.124beb49.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.124beb49.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.124beb49.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"8d314226afe84cba75086ef952556fa1fc0c5de7","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-KInk8t8M6UTw12MaJbSqBJgjAbyVJcqt+ys6DlO8kLQ7a6zWvIiBJlNpeFx8ZbC73Rb6pv54BOLRjhgEt8QFVw==","shasum":"9612cf7403234e9436ae13032b29eb1006d29549","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.124beb49.0.tgz","fileCount":13,"unpackedSize":57352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKpxCRA9TVsSAnZWagAALlEQAIsoyrIOL5pL+aL5y2LA\n4d5Azi7cPY+mz2KSeUFJkq+jR3aN4lzxw5R9Qu3zVW2b5aJdoRSu3u+vfOT5\ns/NlFxgWtRDo96gbjjNt4O0H1r7FREFf1VQF3GASSj+6aRuOADgQJnt8Vro9\nv4KDgNHBFZs1c1C1EwyD6od/7fmq3OHr1oxgRBXZqG2QNrzE/LN749zqHHeZ\nxyn8UjnAuvFw8X812c9Kt2my943YGLoAgvhQq+S+/rUh8CE01kHodJBhM6AC\nRkdKJbqG+b89JJfI4+VkEu6KXr7K+5CR6340cJr3ykH/3aYdi23pSQ/fxBwk\nZk+sY0G7YXAd++M55GNLt7ifbfSPVmL/DDvFhBbvyJs9BzEBU0QpWEXyH8iE\n7ALEGRrt2pfmg7ItSL7TkAyRANQfwP3XH5kRYQvFYNRFhN6U7fG6vFiPGuEA\nEhofC4Zt6hwsXTV5NOTt6u1xYY4NGJUEaqrHRA+1zneGPi961ZHSDU6qFeBN\nqyTa1AIQhn2Ft8xTySzTyJo5swBxelqQVk5t5OjZ8WjZCpHRy3WPV55WPAHE\ntutXoPMinyDYDPB3ywRDjkZLsMEvXlAJQicXdaTf1h8bMjIxCx90wgSBeUMj\nqHcvFxw5baCfeDXL96+8VBlp9Reij20OuRbmMaaiI49QFuW7W6Vl1kvlCdcV\n+p00\r\n=ARDv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB6wDz7NczYLTUmWWE4uXtd122Xeis1tJdKnmfQPlTfNAiBlltZYZK8obUF6lZgUE1Ib+4Z3dzPJJdNqF38BVwgO1g=="}]},"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-drawer_0.20.0-canary.124beb49.0_1604102768668_0.36701789722417777"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5937f468.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.5937f468.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.5937f468.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"d1d2934f5269407a8c0f85d5112be5354c17a971","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Bl7sZyumoe3KZZf2QFPO1CBQRpFlbUwarIQWh/sQL1cYXqGrK2UM0/NrlIqdQZvjT1RcbM4DvXRts1hjhOxXtw==","shasum":"a6f2002610c740f0272e12af90682224770c107b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.5937f468.0.tgz","fileCount":13,"unpackedSize":57352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxeCCRA9TVsSAnZWagAAYjkP/jaxfJ+SePVoZFi8hchx\nKk/7r+/UV4iWThxkjPUwLiwJI3N+YNZ4QGYhN0E39IyxgNh4QmoLsZYCaCIa\njRVhsmcMDcmLIsY9+x1IZRnrqx6g1Q2K+K/g3J2ZbfCcftnpNW1gYyXDikTB\nG7IqsgSJR6+vzUnJvk7sbUEAfldzpFvlcw9xa/LsqIrwmahWReTNQ525uCN/\n7A6r5BWF/MY/mXrDXPJK/cO+Z9zy/H+x1ywbGAoxcxCeMEyveH1lsJSErVFr\nN1M2NCblzLqrXDdtVWT1Oc5wAATskXrN6v2OdWE8GcHOg0fsck65oUGYtyzz\nUpmtwSOUvDeTnkUjdJmvOL3RgT7Uaq78UDMZMAA3CPWFlJk8neaZ24tzvykK\n7Touxye3CiQ/WGqvFrxHE22SZoLBpjODI+K+4hmRZpMVW52queZVCicwUSzm\n6E7eEM+e/UzfhN7ZaO0xIIAExi7Qo/vE7BjOKR+SeDN2wjSRMdd/TbYN26sR\nAlQ9PXZcaELI4sGNphrGGN2QtsnndGNlWaog08WBzTtKdurEoDC57N98CIGP\nN0rPyFxAVgW+HJySbwFySMm7Va4eYldSXmk03vtsKPIV635Q0/U+nvZf6bg/\nOHa0ma2wLDCzga34Vc2ffVo2ote5GehrILiOFkCN7JxjdusB+ZsrP963yilV\nmcra\r\n=z1zE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD460gSg6tiw7V7dTOR3AhV6fAbc2NoNWqkSCLRHDJpCQIhAK/Z3n5S1qhDOWYCg4oftQ31ouNwEk6mlBtdU4Y1jMvx"}]},"_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-drawer_0.20.0-canary.5937f468.0_1604523905570_0.47741736200248464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a9bafaee.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.a9bafaee.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.a9bafaee.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"672dd0ebc89e93768abf9e9fb4a31fecdd7873ce","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-yk6T1Vlhkn+dU2IkYtq2viwZr0lYkNhcsJiN7Fpo7vj7D7u3pGPeRS/rnWst5L1a7wdFfZBVYQ/fpoIuzfqi3Q==","shasum":"3a6896a001fcdeb14a0b93b9ad23f04a00771e57","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.a9bafaee.0.tgz","fileCount":13,"unpackedSize":57352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpHz/CRA9TVsSAnZWagAAufQP/1Xg7boAykMzSCjRTwmp\ncyh0EdPj8dITdjyyEhTiq3zROA8gkQM/S84kkecHDfHbZmrwBwI4UXPcplil\ny5Xm83UFxntvbCOLgPgplwWqMXcrq3KJSDNtkJHCwaQM1ipeWf9p5s/zb1IA\nRwvqvVcittIN368QN2NY0dthncZAdj8Or5xkSu5v4q9Vyk4aqlPCBXEazXVp\nX3tFEcoNKLO5qBKnFvN8p7s6xooS+TEYj9lJ+WeG3+zBlEPv9A5r1fpw/8L+\nG90A511/6bXmz1XKT23mnFuY/pUv1JktNkQljbNBVL6T9DkDBMOfROVGbArb\neocrLCpRzNP1EmipVD0dPJubloDfeg8CCmYA6L1sM6vFqjdK6gqbNoRhrM2x\ntYCfWgcoL9JVpZai0t0Rti09ABdeTTXgYlQxxX6grS+UM3sFkpMOj7Pz0ZB2\nBTonRe9p5Yt0A/lJZZIwS2OaHrgbI5ep2Wx4Pe3kU5f/pQXFlUh8Cs84mmat\nUCeIQgtGMP3+kbkk9rmINcJxGjnRDrTzWqNymwu/oKqENKvpHT1FxDxAMKER\nzAVDrDDjtG3piTuEobaAmMsaq9ZsZWmbU53eOK8lq9cGLStAAvBN91/w3bIM\nDbz0TGdQIUgmfyZcvHl/03BQvVJjGCpNXQKqPleAVFSziTXremDuYW93quRZ\nw2+A\r\n=HGQU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAGhr49krG0l1uA1ZoUH2vR7cgvK1aN6hwTk/om04LfgIgd/ZY/7ZGjiSIeAp9og5vEeo98UZgR3dez3DJpZmputc="}]},"_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-drawer_0.20.0-canary.a9bafaee.0_1604615423500_0.4686635285985057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.184861ee.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.184861ee.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.184861ee.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"292f005e510c59c9b761c4120c56e8c9854e4595","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Vl3H7TU2+UdmjjtR90Pl8c0r1ATr2eYmCUkuA8jBk1DsD0wFKaGLr6A3Ep5o3AhBjnzLKe+yF89V1g2N8EOx3w==","shasum":"3b573d64585735ef467c91bf5f7fe95feaa5b2fe","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.184861ee.0.tgz","fileCount":13,"unpackedSize":57352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpew/CRA9TVsSAnZWagAAT5AP/ibVUDm2YdUYohmfxUL+\nQG1B9ywXe8sV3GhwnsvT096v1HOS7Zr8mBvCQgIiB4T4ipYMszO1G0xuWzZH\nYfPeBLvkb7gY8t3LUL6XkbRbJVZ1H7sFcHLjxv5EMnn9WnHN+VxJv5cUQrbs\nteu2uk+5f02O3nz6o7BOFqmIqQbWIFREU22PZ4xPuZ5uokDPtPe8qpLJm/t/\n59KOUaNPZjP66G67g6ERjObKO++dITRjBsw167AVEqi5rxZdpTTdUZZu0x4q\nNU7IPbYHMjYKmvVgm9caVXk0i7W2yMQHsaK73Hn+YXvitl6MtYNK7/h9RdIi\nlRvTP+QvzhJuppODKRmYTK82ObtOB3cpZSyo+A0Dcr+6M5SDLJTkHvHeig0/\niKmHyzIM8hAtC8RG37p8d1h3cfqUFyZ+aU3uB9IQEZUN3p/IBhCSb026CYUc\n3lOH5VzVMVaop2X63x3sYUAAd9Vof2Re3n6v+al9pfh8Wos1qkeOdKIoOhIx\nfm7Z3Vd/7lqD2azOapyj0OncPMzhIfvmfq3v3Kb+hHyEBYhiAkS2mayHYWdw\n+SaKKbXZ8KwINp6K90KIB797VCdz/K2SXfkVN6/0YWWdjHyqNHd3yOSHNkw+\nl5ilzOPNnbnt+8mB3tHYoTmqevvPovsbEojDSlkQm/CAAo+oUXw8xDr0Oepa\n8rMQ\r\n=a/3C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDx9CeUCLdnDJxZzM5HTxFn5k6l0jblIusxgo9OoGH8wAiEA6s/RkjIFlq8q8bLj59VvaqxYHWBA6cKv50MLrGg56y4="}]},"_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-drawer_0.20.0-canary.184861ee.0_1604709439157_0.09048530085512319"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c6ae2d6.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.6c6ae2d6.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.6c6ae2d6.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"38ecce3da3f921a8c45ce342e47456c702623761","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-+TnZFqeVU5f0EKcFKrvF8RFFJqcffblVPYONS1hYLjZOAqnsPli/rDnU4sEFpWuj4HbS7SkvrcPvVYWK5TV9Tg==","shasum":"6c7835b3452d1fbaeb210a0a81afdf9dc14c08f5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":13,"unpackedSize":57352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT6SCRA9TVsSAnZWagAAZpgQAJY1C5+RZesDSyPOIYC2\nfcRmeuOuOk0E+Mnwsxm4CoP6dL72dHQ6qclOgKHycowMrQP1f9BrM91lFsaS\nx6SN2HPp+qn1+gD0d7jU9AccCbzDtpNvDT2X9aVzyDmEd1D7QU/hc3l+I+G5\nycjO8KzOofIijr8rYWT4MpHWdtUWpR1XFFEyVMnfBXF1ykHU3MdgLz/7SuC/\nWI0CtXRMG3x9wv5/IbegaJL1Bsq3GOtp3CFTHStYtuIlll3EHn9CI4CyMCt1\n29AptT3wNffsg01BNWU7BDL7A+xm/lE6bq10533cRwOy9qF7x8gnLTVydvQN\nmElYRZI3j9LL5Dhp+jOyUPPebmGkIbPNwTL0mtNQ2HBgbVTgBhAFzRlXDC5j\nvBGSba+S8kxzlN6hySBkHtI2FGSkYrwZlSOOC2lF60+4bDIDT81JlPaFAbZG\nRn89lyHBHBtwsGO95g2xZbI02y21qQx5/VXo6twTq+pXI6rI3A35wCtQ3jrJ\nceuGqzVUcD4a+FEtl8dHVhhta50a/5PEiHfHCnpRWsg0inOJCRf9UtuVDisb\nfLvpSYI7AimwTB2KrEwMzLBjzIhTptiUKvHURF6LvCeeWDgsiPrcOl+OzUgx\nWYDvRPWHndGtqINfWztbh8J0heoheqDOYORfVi0yIStO9Ww98X2f0XkldgX8\n9x6N\r\n=WUUJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDdv8z7qFvxUIBSNbv2oyge61qHtrtpCHCbwD5BUpwXnAiEA/algf8QRt/Fiqy6uxTGF5l+Y+aE5QMCwsbh/LkJ/b78="}]},"_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-drawer_0.20.0-canary.6c6ae2d6.0_1604927121824_0.12132096427150318"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ea2aa477.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.ea2aa477.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.ea2aa477.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"44e884f1fa66508713a0632b0fd8052b5a88aa77","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-o/aOngWIzVJL6JoedidKiscm9cUcoejSvWSk/V58byOVS2ugl5Jh6UWAq8Opc3d9jIVtuWmmciPRXz061PuAXA==","shasum":"13ae9ae18e203de2fa451eeea85c301bb12057f4","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.ea2aa477.0.tgz","fileCount":13,"unpackedSize":57352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqddkCRA9TVsSAnZWagAApyAP+gNDLB7DL+T9iHX3f9sJ\n/ye8nO9naoGAzTcl/H/nydRnd06KLAM/so2Cm+LR4ysWTTT09MhcTyUYBpIg\nMAvtUe8rNrCcTskf1LibiioSynDgD2XK0NanIV9JbsgeRvwOonYFppkI4yrD\nsIHrQxYFyjk5L8jMkQQvr19lpeOfAeQnA6Fxw3Z1aIB/kBu4hKv0YdHHW1H8\nTRYx0OR4smwMa2d6bzG1L/oDEuO/s42N21T6zUfdA9N1ltHP/oaiTS7rI8b8\nDlTj95+O0AkmRbjWrGfSHdpPy74CMz64GI7QHGkkAqCCCIJV2Oza+8a7FW3e\nVfuihapWUexIbm9aCAGlZ+v1Qx68VE1hGi9/q9OaB6xmgqcqDXQRy2SZ1kUt\nS5mO/CqZCAboxamFG2bBLqS+YfeA3PWUx+OKkcKygE9nez5SkHtRBSjpkgoj\nKI0LoA4l7NehAvPS+cm2yHWD5D43+7IBucfhTPq8n7DvkBNbsQ1KrWyXneye\nu8zFa0bUEYQPLjA3CDC+u/6QoYhXiU/oRwc+JKLNkLy8onIDbcwrv0bkmlJ1\nbXxaqHNwRRlkw51mJfKgPv7qkk+43xBkB5fScHGUQ3vff1/bSLEBocqQjyfn\nWl8SP6J4QhBgB8laVKENElHqAXmnX/vrx+H8s5NhotnxSL2drVhzbk08eZB5\nUvMr\r\n=wlyJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCU/rmTiHqY00kwSGthWIsYPho1GhM218gTiup3cEz2jwIgZAufphB11KLSuFzVHMSqpaliIPE2o43i9UZmk/qBBZc="}]},"_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-drawer_0.20.0-canary.ea2aa477.0_1604966244103_0.1351614545756672"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a2c088dc.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.a2c088dc.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.a2c088dc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"60aecd658763ef0aa8ea8055ed91f03f6d3697fa","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Lzs7wEMez+dwS+7I4TXkiNEdRW8W+jzwwJV9ld77ETMLdxlgHuOj18pCma6/unI461VMDb7AFsV2sA/70weV1A==","shasum":"afa8418d768b10c203d2c1fd74700c7b6fabe86d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.a2c088dc.0.tgz","fileCount":13,"unpackedSize":57352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqJnCRA9TVsSAnZWagAA3JEP+gM1SHuJnORGusX+/x8s\njpIdCIcxIqJ09a9wp7jjP1BhAj8TX/NKtkNMRZhJiy14xpZRnAIDcHBSAUm/\nHQ8icsO2NEvdVsN37pbnLvvDcPz6wNTz0Jj/4+sC5Ly4kWVQlybj105yMr2P\nqVdyCj/M1OgK1VSyJrw5FWpMyIWhvzXpZdE4BQYKaHrK/QGzNDW6VwmUK2rt\nCnawtN4HZDuF9Sl4eBwRwW2cNdIRcA+A1QIM4B9ueBd4tEf5rXsRjUyotwQ+\ni57/u/ff/pqPM5C0aC4qSOkR3A2XNuFasF1uOJptHoEc7pI1LNEeHiQ0XRnA\nvG3qq6igHHfrIGWrpQ+MeousagWhP2JILl9p2Niteu1q9rym8WbD5SfGQJ26\nu0x6wV+F7hIzehZXezHRVq13FHxxEVBszeirLsCZGrqZjIijF4KhZ2MXGeQV\nh4p7NEkQ8JXN9ctafBq3Arr6oGyBPw31tpBYamNDAyVYMN7sfD/N0CtYf1S2\nGbsQciJlZpxWa5lVA26z3JBZN56VbHeZ1tevyBVvhNbal0yicXmytt8cgtHs\nbC3bvcLy9i2f/2zuhx5BaSHv4z8wyFv6l8iQC9TqMf7SvcLWkWMaORLUYmyW\nVOuuJFo5jTZdJehz9sD1IUEyQ5gIIYgxIc0r9FrJxFnViW79gFifO6anm+Gi\ngKt3\r\n=2v+f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCu7t80MaVBIaaXxFKKYbNLeJdEkFeHKg8f8HXy6vmHKgIgDl6CIcHFVBogLrrwtPGzErSlcgOeLrtwbElmqopJIqU="}]},"_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-drawer_0.20.0-canary.a2c088dc.0_1605018215183_0.19123044298573166"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b04d71d4.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.b04d71d4.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.b04d71d4.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-pVCZfyTTJC7eGHd7cnenKdX0F8hbu8Zw6YF/RsiBPjJiM8m6CsPcdc1+QvUE+6o268O34GKNMRSUg5HlpXZYxQ==","shasum":"e6a49e667caa6c0416fa8f86588c55f0ea3a48ca","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.b04d71d4.0.tgz","fileCount":13,"unpackedSize":57352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRFiCRA9TVsSAnZWagAANVwP/1TQ64CduBPCjbJ9OufA\n6nrDk9GjpizCeJrHnDMCm3yC2AjRKTy9xbSCHFMwU5x+hnxxsGjmDJIBj4t+\nAIA4hHa+NrdwDyrC/Sbx12RYQRNsVXNi7PbE5BHjVFBV/NO5d1p4Zq0gxgsx\n9DQSqBDpd0n+q8vzVGCAQ+8ZO1nftPKBpDPkBRfvey/iuumEp5z0pE3E4x0W\nhV7i2ziNeLgJw80595ut/lp+v31crWQDqkPhEsd6ecnSW8Jy/K9uof7lyDss\n3j/1kKuJjF4vNPrun73RWN75yRx2C3rtutK3KGRIzlegf1rRnoENZxYB8YXy\nO11Tto/HzDqUXVWF7HABY6T6ixFJS98FP+V2Aim5pjBXPVPOEQ8Rh3vIYZ1A\nQJHbpDOSeO6kewMpMt1A8FpkiGbgHq8UdD4N5xDcrWh7nr21gUWgf96nZVna\nD6Wxeo9kJvHNyDvD7UOcACN8L+c5grNNit7GRIVBpMebBg9xbfVZL2bqFPZr\n3YQ4t6AoQ6cR6/Zo/DKHZw0hxVQEtA9KeOBCGWyfAcDIo0HEf3O02C+1d63T\nIrmgSgOAOcU7Bv9OoRMog3EXiKNGwrdOZB8G32IoWUN7jg3MU2E4HlSaBEfv\nWfyqryizcT314yt0BtObDe5nmf04LNjr2ktBQ78oySjOfqcP6sKjznDhHtNg\nTq0m\r\n=M2nT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBxRFZGe1Vj5s/Ar3NWgE6KG7lDgEEXmBZ4qltegZv/7AiBcJbEbuhmzAtDy0oK+YCDqoM4eZ1R29o8lH991hoyO2Q=="}]},"_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-drawer_0.20.0-canary.b04d71d4.0_1605177697714_0.8952949459429171"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2c553352.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.2c553352.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.2c553352.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"7a02baa2ba85467edeb67014cb8c6e5bba77edec","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-GE51dYSZZIXouZYETHUrnM5IN4Yas7wA5bFDYbro5v0mW5rsEJBcrHThhcEcjFq7H/aB6LTByhEX1cnMcIoJXw==","shasum":"38d9b34bacda407d2d66baf310343129cb86fbd9","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.2c553352.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbpKCRA9TVsSAnZWagAA9T8P/j86ibHskFY6tWl1wDcf\nsOkhXMzpRatJajqqsSggZvF39XSzQh/LZu9ETxEfPkULwSzt+qBISdYxkyTP\nhROpAVHuSCSLMMw6fitctpGpUjUCTWb5gkY3svdFmefTPLu5LRE15sw3SBa0\nTYy0VOXjnLn4Ls2pInbsqrTbluf21TnQEoKFk0NAbOnbNL7xD+jntxaDk4AT\ngaoni+TjTu04ATkk2JCeirRAzWs3vcnI7qBunKdlxaQLkQJbMD2P/0ltzH2E\nwG/+L+9ynr5/gVMSJXXrYIYALrFqAOE4ecVDAhhKfXNAp9mAr2vUeqKEBN7p\nGI3OJd/6N4PUNY2HdVqzZkFluJU5fEcu9LqU6h0khmomV93rAi4UVEbCt/w2\n/UQ6dprjXHjd8M/G5XhEa3fm7cguZ5Og9Qb2ysHVbBD5Ou+7jT8bOrDw+pHV\nkcq42NSE6XQQwO6uGk/eQRf5glQAvzmgoTcV9ws8VP7ctRaOEPwfbIOkZRHZ\n0CdGIJJBCe0PdetGWQrroJQ4hX8vyTb7Um8XxlQkbvrNiQcOxjECiKTxcjYX\nqu/PGPYrymyoQO5s8Z0daNwuL8XUm6bJsGJAF3xmB41QHi9NmsxJ9OEN0HGa\nlwz4ziEJmWWNsvMsiGvZ1FXn0yBs7ljLiGkN25JJ+NJi+dhJryrXk/LtpT+m\neVdc\r\n=qHOm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAvpWOWF9+ohWj1Cy7aC5HjOXgYk34yz8w3K4n5J8hQgIgB4jh7zkJtLysHKqIg7OL9bpD5F3K6gD4ImX/3yYTjk0="}]},"_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-drawer_0.20.0-canary.2c553352.0_1605220938383_0.20849393582057218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6560d19a.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.6560d19a.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.6560d19a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"2b2093b7a8ece484614a94718cdac5a72d7e9cfa","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8Mf+zcQr1YGWr85IvAjj11UNKvPCZyTXsN19J88bC2mhEWVpaVbN8Qlp+YMbVuflYJOmyu/ZI94capwy8uXkOw==","shasum":"bd30173c3994f51110b4ece644d1c68dd14afb61","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.6560d19a.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvEBCRA9TVsSAnZWagAAlZcP/i9L46NYZ3jDNc4dqFiH\nZSDJcWPFJRbhSt+veWrIpgp7KVcimi6kIkdf3wCgErukLIH7j2ZfS/J+M2BU\nQszQXIyC+37L8ebmRkuhRjHdM+8kIXdbXqQBN2IiLr9yoTzqtXCnYCYWarGU\nuAbd0AYH/4N3ap7FmiGGgNJPsCBi/QqOavGVwVxhjOnntcKoJvi9A0iR//Ub\n8VcAnn0+UYBMc0IRA+3zU93OITFHkU1TmOXDgedIOFw6GcgfB1D/HVthKyw0\nea3I69IfntqW1cLnBe21aD4P3PvlPRtMqP7pgxQ+4hgS1dIqlScx7+1s5wqP\n6ZwjNYKCGaBeqQZe0hDIQ/RaH7GSNtr93viRDKy+9O386w7i1oFWNF3zOohj\nalPTMRM6iScQ0AFxdXdNnYBsayWFUTi0WjKRXquXs0BGfjJv7Up2LtVvARDU\nVUp5wCSsu9HeLTLMWcoe+JS2jQioBCiCjw7yInwNW/Zey8SWzw/vA3vMhYv2\n0xgZEvWctAxuxU/K3jrqaaOO/n+XeFH3ThjADrxCB+C9PicAOpKCcNyIIdlh\nnQikKFRFyLfxNZVlVOe9JqKSna1mHOn7iq7j6zo2u757PjYNcbUOHgImfaCo\nk71z4HId9mveyECJhdfFBK39KtHW3ktdwrjY0MjcvY+SPw91AO758bW42xnF\nabQD\r\n=J5wC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICxJjtKmHrF87ow7Al7UA381X7fWRMIiSj+VhnWLrztFAiBpvfCEoHi7N1jHAy0j6L3CjSxGT6WTqUYbC6G6aLRZAA=="}]},"_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-drawer_0.20.0-canary.6560d19a.0_1605300480411_0.9324189687645636"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a28d5ec3.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.a28d5ec3.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.a28d5ec3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"f24283a75330ef6de8cd16f8373ab1bba0eabec6","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BxzWD1YcMawK0T9ySWAW1jR1A3TIC52EyVTL9Y3PgE0sguYs3nK4lypRtXPnUaau0a1UIkM6ph+WxA0WUpBJLA==","shasum":"3926382bbdafe73848645caa1b098e379fb31983","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.a28d5ec3.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+rxCRA9TVsSAnZWagAAQuYQAJxe5G2JsVApwGeKpAF8\nmS9bv+aX0/0g0jobpc6HDWz0VzCIDn0QxoN3kdRDEwMXnzQmx0We5LF0GKTR\ncTOn+AQNEd74+Q4gBZG8f6Lu+zPML8n2N1DtMFh9CXVqPiYTW6UM1x1xhj/a\nPv2+i6P87kwXgPXtueqgNIaaQNl2OKos3nyCCbBkRvCSQPaoNvuG9fwXskvu\nS46rr4hZ4M9MxM7xLTG7XAXmRLRe+qLU+RLe1qFZ/Cj0G6JJgh6/r4/T+DI2\nC9Rpr30QRZay8u1/HQ+9GoUMgFO7j4v55MoSq53Y88hFnvKsnAOPaiiTIuzr\nJEZ1RCiXXEiRc630dVVyTx/BAtMnlXIWcVyHRH4Z92x2FuKOwZfvvrA8R9iX\nbQo6FB1dY2gX119Xt1OmyCDKj3sVdMdqSqYxH3Pr92wzS7DFqIm7kRsjUeLt\naGgYIFwK7FVbXYH9R3601+ILAZOOC8DMY7+vOu6QRUO9ZloPtZaBJ6WvJkew\nKJzRgjVgPEg1+D0IzVUezwdZEEVzVdlb7vO6g5u90ZwpKrxQjlJmbXWnE88e\n0VBSIdzp85c4sjd6V1i6IpdG0c+x0Cwsh3J7odIugLMAr4CqlnlhvwEb6wD6\ni/V8Tukx40dIfsNfK0HxzDxwdw37JmWvlpnxwKPalqd7D5NNHlBWWsb48Pax\nW+qb\r\n=umhA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA0SoRsF7YGRpa3xmnTDBvIaPaKtLoK9qgK2ClA1EPEAAiEA7kvP5iZpSeVjyyomPOjcNWtCAP8uiad6Qg/xfpkhKrE="}]},"_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-drawer_0.20.0-canary.a28d5ec3.0_1605626608725_0.875129943469682"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.03e7e778.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.03e7e778.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.03e7e778.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"b828c4befe76e485a57dc3be64c348c56f37f89a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Xsx3UP6saAN64z3ffcmfjeZuPmsDzdgFQ7F2h5R13og8VnGAfbBFsO6MZtbueRvQ7mWDdRwkWtbkj3pXib58mQ==","shasum":"c0aab1c6647007da40221e2ab78d06929bb8fab6","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.03e7e778.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCOQCRA9TVsSAnZWagAARJUP/0/duvTzy1FxR/KnB64b\nzK5vNLLsLxuoKOJHNTmBDhOzUbbAmcXKFMblSrhIMINU1laqjL2qba1uR9wd\nHJDzNlEt37cUF0pbtgEUxgDM0qeij0SJGaYAcAYcqnv9IvownOGQeQVj4k8O\nP3aa8KncoNjuh5whROJ486Yqvrq7KUOQz5K3CeoT7E9B0h6O//lHVmhvy2xL\nQ/gUEip6wkstZ+LVW3D66xCxg9z5Woz+BFs5D4mFGqFgrmkfkqPPImlDUJlN\nyEJg9ij8AtSk2MmcV+GcBNL81Fd1DnI1EQ71v509ZWuYseuRhEdwkE5lW9Xp\nzaAWhAAv4z0jbYk88026TyjVYMorbFzFLzJt5cBvXpTNPc3s+7qCseGNNK0p\nJdZATFdFr+zKI6mWk8nydiOVVNsrhevvBEZ99T/zMBM+S2xqNSX8Hpr6B5Cc\n/gmbD21C62PaAwbWnVrZqztV22CT0Lcc7z9x2CU5W03vZIKnv/KY6e/FMqE/\nri4Ki+MuN8uh35H1lCeaQoO4lvZhXAioqSaZRmp/v8jUhLrMKpziTNV+MvLs\nIeCCVlCDEByb2WmaSBl8pWamUG162sfUgE8TZZ1xlZKd1UL/NsJDp8izIVa8\nkGsYoAwxCJDEJyAP17yYwgXl559NNL3QSD8BTbda5nZHMFDGb00jqwkCKq+5\nSoV0\r\n=jMT9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDVaO/f9+coGyDMHdeIYolhwmUORWCmjBUqwU2qXR02ZAiEA7h/7YFn1R7/QUTx6mnd+BCUqgAAENc9C0nbBFciY9fA="}]},"_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-drawer_0.20.0-canary.03e7e778.0_1605641104455_0.5721102433496237"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ac8ed597.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.ac8ed597.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.ac8ed597.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"324571445f4ed0575cda7f727c54e156bce8d624","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-gH/Jbz+szIg+kMUdqEvaI+sKQxL4EGjU63bm8cD/AjkoaRQAXtk6jr2tweHEEIiDSV7K/ZiT4jAqBp4W8Dp5Cg==","shasum":"c0a8f51dc2b900746c576f9eac65690c15b4b767","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.ac8ed597.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftEqFCRA9TVsSAnZWagAAGFYP/j9pgQMawId9jjM62Zth\nExdk39QjSuu3MxdmH7i+zGpRm7Md6qIZJX/vLdE1qCHgGMYovHh7lhtplHLV\nH+UAk2yTl9Lc+rwguXkWyhnresEgDvGT33q8byoGKLXN5UWxm7Dz/Y6HTgfj\nnN3dqF45ItJSoI6YE0zMumuntnQA7euNnMBnA0Ic8zhXjXnORp0uJf0QxloJ\nICqEa4Cbah/PhKEyZ4a/OZPVcqwM0hkIT1AIT+LyUPWUP4hX6tNvkTpOU0rq\n2vawHW/Gexy8rh6u0EzyXhMNWIXHjsdp2Duot8FR6SVszA6KrLmwhANiLGxW\nL1T0R+GJmBwfz+G7erWNiGFRpqu/RX9xswW6KtMsZiId361aUAZfrQ5wxtOh\n3Aafjmm8r3zPuHCa27GRVT0W87CSAeuXAoQ+mb/zTzx4vAoFG83y7uJBWF7y\nstmc6B/u2UD90J+nPonxDgIjf+doQxtIHS+pqzCUv0jbdLHaFT8gaIGBIQGa\nQ8JtUwYoS8uFDyyq98XQPfDw2Ns8PAbwOIV0fzt2c3tTVqATJmuwbrVz2FP8\n8++WHzzaZ4+x7CkfRLjC/L71yH9djKZdJG1cBS4YqCdkt46+EkN9kup8hOMh\nZ/tcs6O45KpG8Xdwumng1TJKeWerTDlct50Qg1LZykMy1Yj+uruV2cOHWDnb\nGM1E\r\n=9Hl/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDc0wCSD2OVA6yNnch1k6KOqXx21mJqmCOGCZ5jIkhe3QIhAJJAsmtazH3bMKrd//6/J5jGGdqAYEbZkh/KeiX4EeIG"}]},"_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-drawer_0.20.0-canary.ac8ed597.0_1605651077357_0.4613650042450721"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b6a60f60.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.b6a60f60.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.b6a60f60.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"423d1aee62c72c8c88e9e5e792712bc5d4d10b13","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DHg5/jWkb/4ug8bJ/IpSy8tphLoICNh7dF0DNIodoxO0vyPrhV8MT2ubZO2pjjlPYIOwWIbp9kICZ/Feee/3dQ==","shasum":"e2be65255140941cd8961d2460db6ae249b971bb","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.b6a60f60.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFP+CRA9TVsSAnZWagAAqI4P/1LpttTlEthUAOrqF01N\nP4zZR7kYSpBS6GBP4TIAtQZtzSKA1mrE//Ai667bptLmaedSwn0oP6uCdNjy\nzx5OW1IUapcYAapMWLzSPmt0Uz1lbOERdDc9IwV0iiiK5D1VF8wuY+IGNMU+\nx26mhj8lbKVTOEXnJVckvhw/TnUFvVOIgLcFZxIqDKe+96Ch28+EXnvKdPEQ\nd84Kx5lntCyWysF7Hl/c5Q62H8pui18Eht/N/bardOYQJ5LhjjwhW5FDjuSD\nPs+f7USUu1sHYbWTAd716ZcErOuixdvI6INF0lhz6+bVSq7zuH1n0waghlaW\nq/k2WXJQfAZTenpOsq1XOrhRonGGrpG60KVU7lM1vPhmS8uH4i9v27QFbz/7\nKOY5Nu+I5lYiRrhwVhpQm9XUOWLkr+h3Vix+dOYKN+Xbb3EiqNWeYrJR0tHX\nnjDa4GtlZ3Yf+bi6oKV5lbbJ0IK+T0Hw9CsPPCZ0j4WcxFwXIMx9x+i+Nhdd\nrz7RHwN8YglXAOLZNNKKMbVAyaJ1e7xl5lGC12EprJZ3ZxkZt9RBs3PPEVKp\n0k08HJI+SH1BOvGIqsu0AhjYjAMRv0eP6s6AhixorNAuDbtl+TMo4wqc9gEE\nhF4il+BzH/Y10mB0S4IXJPxOohecOvu3qI07IvjPjcP/CFaUGfvY3Mv9FNoB\nB/P5\r\n=pj20\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFjPoP/ShdLsD1YOoxltIYsS1zQUCpXjSXQcw/5v8EhRAiEA6N0AkPPIMOCeZEsdmjPXqPXgeGYfCaQZBxYQqoqyEl0="}]},"_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-drawer_0.20.0-canary.b6a60f60.0_1605653501854_0.20410005859470792"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.71cc24fb.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.71cc24fb.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.71cc24fb.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"04fde8dbd7934f14927b0407ac285d7396fe68e7","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Knqo8BVVulCHELnprn2yOhVb5S+n/jltrcbcoBQ6JlFBwKut4X++ce3h/Ik478wfCkoExc9shqMycMkiXURgwQ==","shasum":"40c6c2cf811ab30eb81b590d1ca8f9fa67a69986","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.71cc24fb.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFm9CRA9TVsSAnZWagAA0GYP/jcShhkqo4tHDTLZWWR9\nWVIqgo26nfBcgXbRFEPON7ODkmdXBpQgZox5MOPKxQJsDeGgLN/8bHZihzso\nQMkFjUwE5cMoA3GMiRqTlNemrhOVWOtoHPK18Mx7HMG3DilrxUWFjveelZQE\noqcbW+NsHlV9ECgCikm5AGiZBSKyBU6y4aNt5sbD28c8n9Qw/NVoRZ4RVMWx\nVMKSJ6uMr3+O9r/cqrL/lQKNsE5PE3vY7YMnNjr44nvbtphZq6vYuKWUmeZn\nfpg2+JJTy6Z0BknYjMJm2UgplfLhxR53uuNIFMLUwWI06eXLFfL1puhSwhrX\nMEmbuEyTk/GQ9Io393UrNWtAv8RPptKJ9Tiv3pQEc/9i6FCm8hZExpSf/Yn7\nI60UdDMXFASyblahaxRSGA56zxPVHnnKTePTd0EEgIZl7kJBEoSoD8/13qas\n9NEPGsKJb+F0P7U78C5Bmai85Nw17CIZBm3XLJazSCREiMf/irRJVZR7sW8O\nmQgngWF2KG/GukGF+Ddso06ZXhIYQ6Fr3p8tTb7OStRXskl9pPXTRqDciiDV\nLJJTRQ6vkRD0i32gPhMXLdPzH8WoI1yhYrBKjph3k0oAnLU8R0QN7Tqiyhpw\nyFGYPZ9MUm4xAe2cTErzSmqR/oW1hfiaG2d2CsV71iNqpxPBQ0J26yw27Cxt\njI1W\r\n=7liD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLiCS3dTuYd9BmdWgC1uiXxv4mBNgO2aMSDJviqqbTBAiAqhuAYL5UZsBG2yUAKBOscLYnd4aDj4alcaUxSGODfpQ=="}]},"_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-drawer_0.20.0-canary.71cc24fb.0_1605654972783_0.4355012366122315"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.761027ff.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.761027ff.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.761027ff.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"eef81b2f51aebd88194386f191f7a40e504b6a70","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-COuJsSpVd3tIK1N2p75FtY/cCuBfoV6PCt1go7FOQpcteNAJkk8YOY11SOuw2w4Kd9V3hW97q1YRYO1Y8OJrCg==","shasum":"5042365f76ee77fd2d46c5c403ff3edf57b7577e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.761027ff.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZyECRA9TVsSAnZWagAAnZoP/3EUTrcNTE96addsk5jA\nZFhSN0r7YUSAwoX8GB6z7g39KBejmNmaN97t7Jrv6EOsToTdLeFQMws/8nPy\nKqVyV5gb0becH9Sm8la/CGeCFiG2S/H1nnm6uulgmbtqCITPAZVy81C4vnpP\nEdvbY15GbJexdwUizzhW9vrzD4IHpXSqWK2uYsq7c4NylxU19uUEzTaOVYWq\nDC/N2/ZG1tgQv63+PhrBPYn9qx03ZggqfaymhLtQ/XUYHsW0DbQc7zXnZ7jD\n5QqVCBbvYAfWLA+rhfnTRSJSvrWKM71BQ6zsQ0D0ncGcO/wgMem//FsN2F6l\n4dQ9T2tgCXksacWotGFFBylU98tfmlNXQysm8fuc8RRXOCLCeD3fwtLR9IXK\nnPO2uS4kpdLt/p3aKTLLqumteSpuYiJKMSUUW7gOoRl9zQmFP1sV2dtCVuNr\nM5rJoJHNL1EeVb0xviiQQP3pdP34VW4NmlRkI6YkP2LK2eJXgH5KckbW5E0K\n55N0s2dhWALgnWwzF/EbvwFzTfmC1XLMWmeWV/JTIBCSYCjbVYQxSyfSEQ4W\nTofrE3TmuWQ4ilbE+fVdU13F3aEeIUh5rA0m7qI7MQFY75TDA6W+aH3D5Ji+\nFMAmB3njFa+tArnte8CC4qgQpa4X/PCYu00gEznbevfIem25kp3Ifn7XwHYd\nvUuS\r\n=yUR+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1avpulaxD+T9A/DiV2KAFCMFD/Q5v+RUn7i07dZxCgAIhALEcYHkkF4jD42nfgQ4CZlccQ0BxzZPPtLCozTxtxJAz"}]},"_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-drawer_0.20.0-canary.761027ff.0_1605737604423_0.8048209349139084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.dc93d04c.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.dc93d04c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.dc93d04c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-/7NPYMlR+RBWiKvUINXMGmBl364aefsmFELxwJ5KGe3jCrSysoPU1/08hcEoFsrEP/e1IAmRlQV3gKOf1697Ug==","shasum":"7cc6f6b58862b04e3ddc5b5b6290fad572d72c8b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.dc93d04c.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ3sCRA9TVsSAnZWagAA9xgP/ilFsMXDGF2S2Bei9WUC\n1kC9EM2m7sjoZ9gb3aQ4/J+dEQetsVcy5LBrT4ysRWg80RP8t2UmM6lfIgC8\n9YInWugRkUvncI57fCygBWA1bewDwYd1WTzyCN9Fy3WgLHIuw0VzdY329aq7\ntcIg8wghmy/mtBntY6ehV4w+/T0FFwVOCxFEN2AUH3MhQH4fvAlda2cOnsYM\n7UdEDFkJR6Zei13INkX2Lo122kHrfcvJbeW0nt4FNDxHBnP0laMvOwBiGz//\nAULlcTHWdwrWLGZ7ACNe0Bp2tCRjkF5mdnnY5oCnHeJQHozYitxynQn/OeBs\nAX1z16nFB3QHPO9Ay/nhmW746II3V6cQbiFdiXItkT1fYC9msSxBzG57FqIx\nJ4kg4DTuWe221T5vblbiap2Eyz3fjKXnb0ke06sZO/9YoS2PbFnAJ0aJCegU\nCNkF3HE+Pbc4zuCqmRweP3BgV8u8oqXc4MhsQmqS4OGZxP25eWgW4nh5x7u+\no8kOQXVYPYGa+khUeg2+z0Sfk/WKybk6pa6OqZC73b9cx+FX+aYsZQRoEeIr\nH+dZcP3gnFSJeWg5pxT4UmEniKPVg4PGPeQWCdqgddvMZSxT3exCpmwHjvBR\nAif9cxflWNH0ChTBxP/PO9YOUhRZ0UveCiSx00JslDU7CjUiWpvPxaoCKtnZ\nlWHu\r\n=+B0W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDZH6YXBv6+2WmkD6/GVHRgZsmlmDjwgrFrqRiyS66v4AiEAjJN7Gt0dNOts7ijpxfb4e3flknNmfQJ0VQq7XH9ql/c="}]},"_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-drawer_0.20.0-canary.dc93d04c.0_1605737963630_0.6658056748998247"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4a5d4eeb.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.4a5d4eeb.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.4a5d4eeb.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"6b9b0de3adf5b550661d63baa970642b71da5fa5","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-5lM8GFE4wNFyfSvNY9FDdNN3deGvlfbOpc5aumXLReuOY/zcP7MFukJIqRN4Dv0GsNcd7OfN1nYjnfQ1N4X9hA==","shasum":"97df3c2fda572881609d54b96530aefcea70b207","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftlc/CRA9TVsSAnZWagAA0wQP/jsuJoQj5fPr+KSwmtN0\nUPlIO1B8i1DM9ef2D73PNhl3tbUVer5werRQryusqi1LXGrIxmZKvhkZLfcy\nONvY719ThHIJiLVMZdfb7ml232PZgqzbZTiDtmFs5varkukdzb6QDskB3cm/\nR6ylGyB1xi4RDb35OQacjcBoau1Qfnqp1ySJBRZAHVTECjViS8SuHhbcGdsV\n+PhEmxokbZ6TQ0cdC2Wk2xKEHTg9Qmx20sYjEzkDe6OXkgG6aNnlo1A+KeQj\n9vFoQ1Xnklvrc4e8UVjYWwCKe4+DYTNHjaE9MrHde9v6PIDApFSJP76rtk83\n+j/zg9LXN4DejsgTyNgrMIWR1N8TetHcV47xxW1G2jHxVEv0gY5ScdDdLteM\nQr+6xcr9JaKA3zoomNWUwoylfjQhQKfIaUkXeEhfKU47tlnm+Gq72qhmie8n\nr17Bh0lHaSQxINRwJF2VxZ0ak5wF9UQMS+KqoYIyMJKamu4ZLpObXgIoHLO3\nWf8uSrMXXxKEesKqluM71qdKPJTjD31dIXV50kRg1iBNkeyy3/Y6Ztkof7Xj\nyEBEGRK/2ti6ALqm5aYayq47pLVyqv/Cw1r7viCv3e0GkiJwawIznScubs+W\nTPvjl6GPQ+XpDvjxyew8RcPZ1P4AsL410wrQNgRhfwZNW7ymAkKfKRyN7JPL\nvnFq\r\n=QYby\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICcOrUZ77SbHCoR6P+aJTXJawOqbdhAtim/wLOlb9bA6AiBCs/nlTdVdGdFLgyI6zoM5qnN5tTugiWLR8/Qg3tvWVg=="}]},"_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-drawer_0.20.0-canary.4a5d4eeb.0_1605785407544_0.057235627632613584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bd176a15.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.bd176a15.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.30c11bfc2.0","@material/mwc-base":"0.20.0-canary.bd176a15.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.30c11bfc2.0"},"publishConfig":{"access":"public"},"gitHead":"8c9d27b834d60d0f197616dd1acd74cbf2cada07","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-fGdCWUA8ulpj4snzfmMDGiuGpO6JxzT5ckc0u4e47IqBy+nbokfFvKk+A2soTkM6qNBEOLa7Okvei9/RrDGuCA==","shasum":"4641dc072b843d102c6425517daca45c4ef35c3c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.bd176a15.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsL1CRA9TVsSAnZWagAAqYkP/0WwYUQj0QIuMqdTIvHM\nYhcr2LQrpvKXOHwdIllkqTOmLVhDBibvpulKT6h0qrFeUvC8XXvJmLINUnX/\nzQisLkiRIyBJ/iGTJvHTLU1Q1D+6byX4JOAEB3yCMsQQh4OET2p9ypB2QXzs\nPoc63Zhxne3IUIzLCadQp0TTVdEjo6MxHAZ2h09jl+hnDjuwYUcQ+TqoNuMC\nZ6mBu63z6Ov6qSxJ853IEGh0w9K8k5dSvFJ6xHRZG2CJXYjtSfOv6R9OPxP8\nSzBNMBdc3bD92oOqPPtIJdQbozlsXdtwPTOFru5lzAV+5/EmfpVae3DMzceV\nxNqOz8Oz4Z2IStP5gYwXnxcJedjJWScwVfvLBNltGzkFOLgA3osae4fWNUqX\nyCM04ktOPH/11Cc0YlOTcWUA0Raup5FDB7vB9iCfyypJgo6QIQbfQv835lcv\nSV9UB/0dNdJTfHbqd9jlPfHBrmDC5CfnE6g30m6J7oN5ygVtrFjXKliX9nOm\nxMmIaebNyxjYB4Ld2poS0kOhh20gLOGd6Z4cp16yX4eYz9QevQFHbQTPw5d9\niVC36DqHyNOmYC0G9rUhc5iY9iwtHeE1GKN0Eq7B2mxJ/5QTS6OvNZZf1UAR\neKB1wVCacihBoXrTxzxJKVt4Igqr5LBP1lSnLCfV1XS5ZlTZ/EepxjyfkYEg\nenuH\r\n=7rJO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG1JPt3LQyRfx05eYFjKvewVSZfecsM9tRFL0J1v3CwxAiEAuLPHbyvQhvEEFy3qllAfqF+tutDwlCsDSIzB0mH1LjI="}]},"_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-drawer_0.20.0-canary.bd176a15.0_1605812981194_0.422879413931313"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.e85aa60d.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.e85aa60d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.e85aa60d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"3a749ec8278eb0b5833500696f08308837328144","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-6jeuXpB0/MdxW0dPzEPLGVKjEcSYc8KJ920tPxz8YQtCwtSbmk37Pks8HtBeSvqtMYtteVy7Ubb48ayKZi23/w==","shasum":"1f1acd1606cfb2f6506332ccd43e28471309db40","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.e85aa60d.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDaICRA9TVsSAnZWagAAhmQP/iVWjcVb28bbxzL/dxd/\n1pIxSxSp//52yxZ5HaCJd216G9Tchs0hotILEVZbRXuuMCPjhesGYdxXxegc\nB+rtey43UX+PIt7o3eTsAg/kJYiRQAV02wOOV/0bkO9xYxRmU4wvYOLAsgb1\nK9iGki64NhPFHbhsG+Qc3oWntg9nOGXjfRhnZwC/Ux12EP4wAZ9/FVTDStNo\nuCfGPmivTNy8wQ6pM7YlUN1p3EYYKAGLlB+YAcKbklqGgt81cjQXh4xQIoC7\nYSv3RnuVsg2GNeO/7K0aLegYa1ZCdOOr7eATSHW742yPM2lj9YD8O9H34vdz\nQxugHCn5+XkgMmind4QAg//p44oMVJusMTdNOEVCan6uGYJe98RtXEUWEoYJ\nUALcXIVWkirrf+wJC7CWu860jDBgjHVDaaL0hMV2UB+deez9kHY5E4lc29xU\nkbP4AH2Xi+0s0OhkRNbIdGR1s0OpH4JJJR4DEDxl3eOrwR8DXCIqLBxZ/JEq\n2Mgw/+rP3VGphOkSLstHaFqRf+0JEyjBDXsM+7/F0CzKUr13w7Q/T89CUR5p\nQgflV0qGbH3VLA1IvREYAIrPeEHtVsOb8TdaK/SIeD6Iufu47m/MspjFIQG4\nTWlvEtgzd3c97bidcHhEeY3yEvWZGs+j/4fCFGXC4Hvk3lBnT+t+KNV64AKQ\nGgh/\r\n=XI6f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrW2BxrMUFVaq5wELoztDeLJtAmj5dCmsHa5Ikex/jEQIhAKtux30DOs1zeYJsFMZNGt1cxQmRYBv8hyXRmVGDtM5h"}]},"_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-drawer_0.20.0-canary.e85aa60d.0_1606170248044_0.8668329899067926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.72092360.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.72092360.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.72092360.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"ad7741df1b6ab1f1eaee400d6026dc5ab7821d66","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Q/dXEQTeg60adQasls08jy/ySFd6gE+auCOBqC5x7X8KdbzaPoX4q7Mv1Hx1kDWMv5IvEU8YpWEeHwHvDkWmew==","shasum":"25e8e7b7ecd674badeda28ea4c716d0765e0c908","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.72092360.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvIloCRA9TVsSAnZWagAAx1MP/RVftpKhjrtpRYMkXSHl\nUsLypPux8Bj1j7So75aeX4AtSAWDy/kGdKaKesLBKZg4TgJKwpOO0mQk5x4y\nDqS6314w7Mqo/qqa9Abl8V5Q6eyBHQOnkg1ecm+j45WymJJc0pANEz05UANC\n+9h3tmDqT+BA38n0vgyRSMYHuGnPREolA09h1zqbecC+mxuSWpy8zsX4/css\n3JsNDNXglgjTxO2jiA0rzAbJt4yNL0IrmxjUcZl49QYcXtbiCxrjyNwWJHn3\nSLFzfwYa5nJcA0bs2VgVV2+0ZSlAmsrRQy6uMXmV5+DHo9WhB4iay1WQjh0x\nwsRHQjspUilsWsyMMuLhuF8Apb9EKF1TQSjAdRujpoGtnBFGdnMjQ2hrUg3B\nrANg8zOPfrs57Nurpi+cZ4u//RQeiMl38DG/VHpQe1pahM+pKvmEYeEziMwP\nY709GA0Zpb6exxcpXAoAq+rwekJwzbmungKyUUWAcN5CC9ilvbe//sbxMSm1\ncWcdgXINUm5xDjSQCEAd0huHT7F/LVODMvfwQx0xdPRO1lGPrHwjZdPxDizC\n4QYO7Xd5wLxaxjJUKEYX6IMYdsjarYeRkDwbr4zV1b7PGN9ipnLUmqbCuypy\n4vJrV7p3hjQdX/+ep3JxVNxBFh3XBUw8Ry9LdxlYX7y31vkgPitxxPHNk6aC\nPqjY\r\n=SGFr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxTlNOI4BR/MOLoanxeNSbLhRjbRucEW/RHSHFNCRtDAIhAOhfGV+aOp2fYPVybLlxvXreEYu5CqG/Zxcg9Hlcv7u3"}]},"_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-drawer_0.20.0-canary.72092360.0_1606191463503_0.47985402534422694"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.baf9d39f.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.baf9d39f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.baf9d39f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"aaf8660af2b57dfe4523a224abf621deb5b5d3c0","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-1ui6dASbHmtdKQVr+H5dnY6Pka9Kzz0s4DptmsfPDPqes7PpP5D20fQGao3JngSInqfbJeSEfn5G2QfEaVDHwA==","shasum":"e01b06d9a5ebeca29b28fab907a31a6073dab5b9","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.baf9d39f.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtELCRA9TVsSAnZWagAANlkP/2lLNaN7pQaIyEJz3/MN\ngeeA8fFLuRGH1oF8M+1Ys81vZx3Uc0uVenWmaOE0oYLn83X4Z+Bu0CiVmoT8\nT8M2tN5y0HIb/p81MZZR1U8LnJLzeMRSd66wy+KoHXe6/8gu0M9uK/NLk0cH\n3nhJriadchGVzUM42mtqUICKKUDduMCqhvaCvMHbQ0UU8WoWK22rR/ZRLlIS\n5J1cra+U8YCVI6MWMe+RzhTP7kit7KMyFtm4O1GudJPej7DSxr7uxXRosRBp\nQK7OqctNQ4n8/pmt4AanEjC27mEKLS73+wjSWi03jfwilyNhT6+259s9a4wb\nGI2qnYc5rhlFdN9AMhsO6WS6eCsQ8xhBjlECzCLDJ2IjZdL5NZ1JH4EypXIP\nzPbg/8yg+cxARDXp81UBT/uEw7d8OZ7P9lphC1s45chVXYzaHvSDN7p+y5as\nSnOnsK9V5jihTg33VVLgRGGmN2ZbS/+EkV/4nr8OIbh3Ro56snpyM5QXekSz\nFNzKp/cSXNRJnCtp68uOsYqSc3XO7PRtLtJfv9FbHVhMnLCEZBhhGhnOATv1\ncsRBFQvHY1AtqecIBeDwfTHcRE1M/ca29c5/stkwm2SYNS9c0zoGGcH2ndqa\n+z6Ji9kHcvOt9VHEXcZPVGwvt1xDRF6SizGZqrUI625qfwscy9bkpptSJVQ/\nIKEQ\r\n=/rtv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGeOY3B6jzQo7kRxU6BFMVnrdZsT8olZHn6TsFS2LpZNAiBAygZnUgqyj2nJ9W5GIyp4mOD5UOmd714b6hiwCqVDBw=="}]},"_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-drawer_0.20.0-canary.baf9d39f.0_1606340874816_0.6503151914428749"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.51aab0ad.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.51aab0ad.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.51aab0ad.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"ec218298fa6cb371e229348142cfd266d65cbfa9","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-tAMnnRd1RYbzKdHJsGrCM/U8hQ3Ym866A701fzz7hAUBqtFd1spA7AsQW4oYYmOwZ4XimH4gGw6RoahzD4oVgw==","shasum":"6d5b503b1d6e6fc6e550a5237d7aec3d17e3d15c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.51aab0ad.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZasCRA9TVsSAnZWagAAs1IP/16F8h9lyr/WD/xB6as9\nBZwk8o+tC91Uxva6YpNq6/cs2lDhvlCkV+YaPyg3GXDTC6akCphldo/ylByp\noa9ugLskA5CxLvN70U9hiMxdkTnhr9Gufo9ST/sCyLNooFdRZUDWntScFFYT\nBTLwlEZxi149qXifeJI7/KptQiJuhrffJpAXqM5JlhsD8IDNl2VJAI0aPtCL\n3oH19HE80nddx1c4GDTF/LSPnWwYp4zrm4qMPaNhyiahoHatoO3B4tg7DVba\nieCyJo62fsMe3X1GqQJjex+FSsnu4JOJJAq5Gt/hcaNFP+wYZxUV0slQLcYz\nl7neNXyeD1E28dnEc8tI82I+uUX9ijBr2Hv4wDNkJ1msVM7XuiFPaTUIwXsb\n2jFdBF8caZvkakP3VLWwj0h1IV90FtG24IvOmEKzf1YG3QPTGjxfbuP6E8II\nU0BF2aXK7cxllfl0SU/Uw2gODDuRWGmkwupZvaMXgSzuM7acYarI+2pYYHHF\nFGeQ+ZB/NaL4AVYcXKuf8VZ12uUQ0hAhtZ5DpzK2gPn7+FOCh+A+mksGiz1M\nuDfoAUiEAKFSVLWH77ZV73QjwqlyCze1zzSxKyoQc+2TTrw1SkgZ7kZoI0m7\ntx0DupjHZv1guK3emSTKVn9W2nUEkk7JWIA2g5d0+qhMA3QGMVpvuTvI/hnI\namwt\r\n=XKJO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZr+4lHD+oOAqS/LoFJzLH576NkW/iVFpaTkxsceqr5AIhAIGWZjL/D3tzJmJpbGSQgX6J1slJCNkhqQ2ZKaqLAImS"}]},"_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-drawer_0.20.0-canary.51aab0ad.0_1606784684410_0.6910551284038158"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8fd4af5b.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.8fd4af5b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.8fd4af5b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"5b16bb5535dfd0f880b710b51d20b7085d91658c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-1BspnyehDfI7DT9CzFPeklmcexcmQZ90MprD1sVxxfcLQuzUsPggRi2MFucI7cyPGFOMGkqEq7mvyjqp4YT9Hw==","shasum":"6a116e1dd9fc17ed3bafc9192c89a6cf2d9f9755","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.8fd4af5b.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDDACRA9TVsSAnZWagAAracP/inyyfAd6RCPA+32G+0N\nLwB04D/EuvjTai6UcRqIx5TAFyo11eSOKiMJ+U9b97LTRjmUCvVAOs+Cn4Yp\nDC3Q9hQZMrCnipeBYSh4xb4skuGwQo0QISdfRwPNhNX5sZ94S14aXvsk3xPf\nyPCGBEcMQSaumWt9RJbgKnOSDwn9t71Du67lml5oeH8p0zJeLIAFJtHmU3zE\nWnOc7wzqtOwgkP8rdv0IEzNHEq623xH5W8lPhP6XIRPNSFZ3FQxCbaFx8wbN\nrWHqgXwKS4Z4Ou/zfjvea5twc24HuYp0103Q7YNLKRaoAMY/NH2tvA9Ku4qM\ngNs564W1J8W53ULffJNA9XHwJzdU/SCxIJPIqD/Cv2t+7V0zQ3Bzoab4NpYd\n7cZ6yFYrdIRM6hYy5GzhlgWf24eT0625luq6gr3dUcwgHKe2a1/Bkv5hU/PC\nEv3iRdWtGP9wvbj3rxdU+LeEfHZacOYv3cB+spftNacM0Jbuj/VBkyghHl7U\ncvDFoMzjWoiPcVGnIeu1kYes/ksion+TiUCgE3Wfz0z/oK4s8S8I1/7R9f7O\nd54EffuZ5zYsYiCXW0UC9ZYYMe6Q7exNok+McMurKzZuxJc+FLuu/XU2xjAr\n+AWFAP9dVyaf4WEkXAE7n/9M5EB6OXpLh/UgNKID4CTUDYyrAPsUNtkgD87Y\nxmRE\r\n=8elq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFXiI3mIBhvTMcFOXpOEjvHqhfwn2WUwVizkPH3s/uQIAiEAvCr9vNrIJYiUTs4FblohGGbrGEmjzmvG8CBcrxiv124="}]},"_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-drawer_0.20.0-canary.8fd4af5b.0_1606955200136_0.09787461413407783"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.26d14d2f.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.26d14d2f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.26d14d2f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"50590c8a7415327322f7e0115bead5b6a56b9d50","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8mR/fnutKhmG8/o5bTz/zOGj5uBL3hUtCRHaccHaxobBL8LWGpm/rvMp9trVfM6WJyVr6p5ksEmlRfp8WP5NeQ==","shasum":"6c6dfd510b644032ec7a860ee4960b654c06e7db","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.26d14d2f.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDd2CRA9TVsSAnZWagAAL1IP/3cmrpRBGoxqTFlnHN5S\ngk8N9J+LU+gh3E9m/ZN+9vWZneZhGxfkS+bB2b92x+6rK6SCQx8DtFcznC2M\nJTjj7fp5WAyob2EZVi1SnCfi/2zAqhgifUXH+zaZGY1e39IGzpABseZM45+O\nLEqf9BOh3c/6VuGVOi9+e/Vc7JxQYBI4sYg9z2ZCLIKwSk7igjXijObNPZO9\nvc2RBT5s2NtKj+Kf2HSgg2R91TktM0aKweTv/uJCBk5GYakmCemvfEuFZPwM\nL3Bv8vgKwPgz+KfGLCBSPOLkNXLzcsyf2gNFwmhMEtnjbfN81OM64OWocFd+\nkAsz1PdZQCVNSqczgPlPJaSVaubFqj0G02Rze/7Nw9cpQUJfLqQxYNXCbk+3\nIkV1kFATtj5o4TZi6ygoobf/bjcf2AXOA6os131sAJS7NmO8PN4TyDQUdsNG\n+K29W7BH4CpxsRMG8P74v+fMqhvm9EnVBPzYpxtd2a0KXffXCPTDIG3vFeSg\nJT/y3u8rJ6ctQfh6RJ7ICVyN5r7ZSEyPo7jbXKJxRz0xL5/AwG5G0KESIELs\nAuSlH1WAVF3UFuOlX/WRasEunX6lUao/QzTA9tGPccWFlMaGug5Y66zcq4ZC\nYuDUsNpAPa9lfLu5oHmgv+k7WZAhegcBu8BurtxCuMjaVcD18T1YW6SBG/pj\nTllg\r\n=Zm2b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgazy/fSUsH/i9DAHWThHPnD1ODd7Z9ggrfjf70xnI3wIgUUuLF/W0P0qa+/s6lUMkIqUEqZHYu1/t+Ko/Umn6Mpw="}]},"_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-drawer_0.20.0-canary.26d14d2f.0_1606956918124_0.03445095486949645"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1663d7e4.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.1663d7e4.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.1663d7e4.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"864efc8adbe583a57a2a7554cb0b3d625f3d52bb","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-1w67ihwJU5y84yn20FvA+NVO2PRUvs3CvwtSzSo5LaQE0Rlb+eTw+QjkEFoay1T/9bh6uaP4MprC+CZfjjXzzw==","shasum":"7af5c12358093f2f5a278dea2c1992058ec240dd","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.1663d7e4.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDxLCRA9TVsSAnZWagAA81kQAIIf/Lx0m03lWNchw9gn\nYiZdemdUQvUES4z4g6zaiF6Bpr8F+fXV1KLw8lTXptgxv+ZlgIXntPfDj94z\nJpyhJDvT8hhQfAhjqL0h6k0wGg/V3kLMsTXLmIQY6gmp7SAMJzAZ4axATbff\npkRNMHsGN9KouX0/KgiK/WtpXmBW9oQwm4mgSjCMEbtqwQKFPr24OoJEX8yG\nm0RyZodGL1FTJ9J8tMpjwdts4nr9OfVbwU9MGv0YTVE1LDrz626kgZAVfgz3\nuBQOWYaIYb27RfashDxrVp23m55MpiJg8ZU9dNj9+kfuP1uoebInQ5cVL0HT\n9bZD6YrEQnBE/da3Tm0bpAb4MzfOld/ULjU63tNhfRMB4pcGAr1sjJwXYFqh\njUnGRXHxn+1sQYO1olJyryuenXxqqNK3Ce6SNSLoy7S1yRVhx3CLiuaedNuU\nkXFxrvNXPBIMW2WGv2T2pyg/1RM8/yitDkzD6xLXJzJfSogl6qHWtgzXOqAR\nXedrLiIMxWeGipm9kXZ5wfdxHdnFL70mFbAoeHcgY6ZjXLQFFsD1h7i0cJ5Z\nTe+SuMCzZPtGOZ7AlqYNbyyT3NRZjHCVamozmts/7oVfX+1eD8+BeP8Dz0LP\n9JzMw1PJPmD+UXdd8TfNj5KFtJF0jx08KQyZDIfy/ZhuqAFDtZ+yU7cE+fQ4\nE3+4\r\n=kuhP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAL5JdXMpVHduoxakytWjmwCXHEqPW+AVBXRRlzqHymrAiEA7vD3VxAyoI0LIXek3Dvpyc+jF66Ilsn+zK08xOjZKzs="}]},"_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-drawer_0.20.0-canary.1663d7e4.0_1606958154178_0.4879695994380788"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.cbe9fc12.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.cbe9fc12.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.cbe9fc12.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"ecbb2ff521324d43ca1ca402e290e52618e0454b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-/fynNTFxZzcCGrrWFA5X7H25H9wwIY/2GE6zg76+z4VmlF/rSDgF1I7jHcedLfmeF+a9geS6YtamWj7A039DKg==","shasum":"689f5ae33f642ef28e36666e465810fcb666aba4","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.cbe9fc12.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTc/CRA9TVsSAnZWagAAg48P+QF+6WBBtc+JSk5B9XXZ\nNyyejP4yy4s84x0LrdhAPgBhePr1XeRTezdYWJqxVVLw3P1c42H89/vx+UTE\n/jkkyCmINBXn9P2WKAnx4T4yHCjkGO3iZH8G66NxinO/KZQrToViOKdwnkP1\nedFZ/kpgDwaD28Twagqn6iRrowgEnXBFSWYEkcfCZ8IuNubeDSBgpuNrw0cm\nl/KUBjxMdwAotLjGBthpY9xzN3GQBxLncYKLR/sGg5Q0xBMNxosxd/WyiAjX\nxKFYTA0QCr4BRIK1hVfEAE27V6o4pnMjnzR2zBheQI5J+T+ul7LNaZnNafym\nRxePpVjgDXNJYLu3UzOShFd0C9YwsdjVYiv8+qLoAqRdVa0KfJFk9ruLHm64\nvxGYaPUmm9yJ+R6i+0CMJrBKt9OzKilctG4okvbAz/TVjXVgmvFa0rZPsxSr\nfufLNnfucz0oRLROcHYnjlZIfZC3mOrhKB6QRKfqj4ZX8tQxjBAaCfasLWBw\nRGYM6JxzuzG9JHgkAJYz+WPSAwmby7pPh9mNrC7dvBawclYIyUyMHCpq0GJ7\nenkfo/7OE6eeMvYOkv94t/ekKoVmMiyfEWaTiP8ESN4+VFvhjLQIA5XS9w0T\nTvT5xaNhiPxN1fnJRaOFyROMvhhvZ3HoBz0oURyzGAgusx3N5AxMfgKZK0yV\nrPwn\r\n=6vHK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFlIBIMkPuUjWKnJe4eawx8xWHVvyW3C0APOoN4BHu8iAiBCwK2wgE3JYFmumnacLYc0UdrHzUZkWe+njXWG5LRlIg=="}]},"_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-drawer_0.20.0-canary.cbe9fc12.0_1607022398839_0.7671432873406441"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9755be10.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.9755be10.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.9755be10.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"45ec0e755bfb97f054d48e3543837f693347d6da","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-NIEZmnX2H0CiYZQiN+HX1Mydp+pJ+hYWqBOwKPGVBype5RHQnIL6NOaQIqLp8M+RHKAgTDZYmHlGJsFtQdvyjg==","shasum":"4c7be05f62822460a254f5f141fb5d0ffeb9109a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.9755be10.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTuCCRA9TVsSAnZWagAAgiUP/R1G46cO39jAEzK6jtMO\n3a8tBJ1eAttLSenbGcffdkjJsmiardmmSypM7PrjxVxVjlJf16wEGEhHtuOe\nNh5g++Tx7aSXiwHcL6XIwdSZx+bVj1B6dFb8iOe+2ll0D5djZrTq23hMUXZB\nuNQ2iVyDRchf/VmT6qZfkf6GqEV/vKsiQXbha8txzF53vso+cpktVVrL4z9v\nF/DrxW3MrSKWd2A7xeykM8nhtmgUpI0FF9Cu+jw8mcFkjY8yLgtu6OH71HV8\nQhPTjtn46R9kSF/DLeoBWQByjMdWg6+j39s20Fd5abI/1ltAjq/9+aLluYI/\nXLrHDLQZaj42/zHg0TEBXAIKILjx7iLBKeepfMJpWEYH6YMid5bO4AW2al4m\n3XW6zqxCyjgYTYFrk8/KOtb5iwkuo4CedCOys/79uoFOc6OjLwm9K4p8Ex7m\nLVaH6XA5H+cD3vEhVx6RBpgaROnkOJtpF2Xjo4+J9ym8jZItV5/kNGId3/p1\n8V/A7IC+hXQKrV+yMYaNog7DhYE24upeHijhe8OrmT1YaOXHkLY2PLWH1ZyP\nXS9Ari6fWRvjKkvbiGE3VvK/orPoKHNBs7B5hgK2iEFHio/3LtQJ4ZuJ6VJp\n6XrRbgtIuFf+F6UWhCZMv+w4AoAIxpDcmi+xQQAst4hsOdgUtRmhJyQUlz1e\nh4TA\r\n=dtB0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC9VBCutO0g30l74/PbXtVMriXRWzoa49XX2tA07iZF+AiEAljQM2yvcR+B0QRhpId5jvjGv6rnvdHd62l4EO80ts7A="}]},"_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-drawer_0.20.0-canary.9755be10.0_1607023489649_0.8656790945528892"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3f64270c.0":{"name":"@material/mwc-drawer","version":"0.20.0-canary.3f64270c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.20.0-canary.3f64270c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"048e0b4e0ee67cb81910736a7dcdae5e949a5eda","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-9FF/df6a4BlJ9MYMiG/y1etUfQmjhj3yKyMf/nRpU5GajWfYWNLCj2aMv8ag9a7kDdILNVt2vAHtRAZGeRyGvA==","shasum":"54ed134c186da1744fb5daee3f1d156c0866cd11","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0-canary.3f64270c.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV1aCRA9TVsSAnZWagAAqPMP/2Gg3J2FZevoNhbxuVtK\nvwPKNlPm4vcj622w/RJJk79+alMii6jyYPAJl8FTW8BQHYwDlCcUGmbODul9\nH4tFjc7kwMnwqLtygY4fI+zYVf8fYek20BqNZcdzN8raiqVR3ixGTcPGe/6U\nHCkI4sSKmW6pEHchdy1mGTPZZQwFSzAz5Qq2D30ElbuLz98uzm7R0B4dDeIL\nswP2B5tZWaKQrxFF6YPt1LilCnU/XKeUK+68ubez6G1cUEArppMp3H59oKRk\nHVX264JJE+NVRpsHu3MCmrbsujgTXV2cT+9akSUUcQcK/0YBc/UvUnT0h/VR\nJ4mESO9j9QzgMKvb8HOCi0xmvLd8H8VO8RgKYG5FsKmu0isiYJxh+27RLZXI\nM04uFzz7+jtL+6rYq4/4n5iNinyAAXdWAiTgXhNBHH06S7Xxi6P/ddbuc/ls\n8pkKuMnLQ9qz8Y1opJaet/UVm/VdxxXpgZIHBeBRVYb5mpqclFrZrnrEw45E\nTj8KmejiqXeFvEAf4QCgSifkBb+39lqBDGP3unaEtC82vx4mewST21n+lhof\ngHP4r1JWXt9HuyAIyh5ASWYsb+comwYPVIcq5QaNZ3lzuRtcQdBAOzx6Y7bb\naQs2aI+OGy214FEUhzy/2w47KnQRzSn2PLCg0WXZErl6p+AMmVEeik4vdboG\njdR8\r\n=urc0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB9Qpx/rt9JGn87Npo1mu9VvvDe3l8E0+fpFeXgr1ra2AiEAoSTisrZ0ZaOVpViKTFzJEQXFduJPKuU5b34irC9jBvU="}]},"_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-drawer_0.20.0-canary.3f64270c.0_1607032154084_0.9215360747284544"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d893b14a.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.d893b14a.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.d893b14a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d85f7378e0640c2cfbe4f96436e664222a4c2571","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-I/q8u2JGZghWFoSmy760BPtsfEi/w0HuiQC0t1HzjKTD085+5KeoPZNdfmGT92plACyKZVZYUrqZlG4bIOkVmw==","shasum":"d811903bcc4fba33fc5b7550e4d206c2dbb417ee","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.d893b14a.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWXUCRA9TVsSAnZWagAA/boP/3AhAwDcAYfL/FkGPpEv\nLCFjFWqbFh4t2V304KKP22Y6btMnwlzIkpCFlqw6M34cL52vZXV/6F0TDX0a\nyFQe8WJrYKHgxj18Ii7u+GW9u8qgq/VO0nz8C29QOMvyJ35YpI5YMGApnVpX\nhn6sYMXHHPjhyosvDX9t+VEDQr387kmbQqQojyCzuWYeVsqIQFaJlw9S4/8x\ntlSY4pt/EzdbmBNG4eENMRaFtcDzYk09YyzcCii3iNtLLZvJhh6fwSfyk8H9\njgaAeIYVIxJi9RYMVU7Yx/cpE8RxvMHUNwkqNkAGK7E+yXcwyK2aa/b9DkLH\nPKdhjyJod8xhv4+XrzEDChX8p7WM/5jdOwTHiOD2PKavnRqHYu8EyAA4Ze8n\nsh/u7vxH+HfB3MiFNZfvoLwaUSDKto3PRrXabmgGYImpIqCLnYWnPYn6xkVK\nG2nAdbFzdRLl3a481Ei+3ZyyTlsA9s0iYHFIgVLZB1xTC3BCW6VO/NHsPNYD\nm/1TIc0vuJfgLUXKTgD3XgeH6Tkk/1zzIAiV0f8JxdQWftCvT7LbRDlk46R7\nj1zs4dcBcNaORDpto7IRO3aeg6IZLLEabV9kqwL2+yJ2iUy/PX300t1+84LY\noqUp4y2i9beQEcdUDazdneJfdZjC0bwyrFBloWWpNRot0oTFJJxopY2ue6TQ\naim+\r\n=FEDM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUj1ge8+xapZiUpx2HGYVtovING1qQHkfhFCHmZaDQpQIgF8ES9Cm4egDmERjQxspVx6+cAmcHxBxtCPEmD9CzUp4="}]},"_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-drawer_0.21.0-canary.d893b14a.0_1607034324083_0.9013882220761253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-drawer","version":"0.20.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"^0.20.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@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-drawer@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-ro1XvZ4tM9PGBxaM94snASB1GTB99Xw1PDBe2GxkRm4KiMHo8rmd0UdMU5wdIfEq+4UdYIU/U1F0Jq6x/AQybg==","shasum":"55dd7673fc4a9907e656c64ffc99180b19d81274","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.20.0.tgz","fileCount":13,"unpackedSize":57316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWaXCRA9TVsSAnZWagAARPwP/iLCbaCXRns1fECCbt0C\njslmqDZI9xdZB7I6XgTJalnbwsZg67/GbMXJPc5ghtDJC5xWmKulUbUIBxs1\nbQLBBPEJ93raqFkTp/VvwB8F+SX9T3gpH+44AK62g0dVk5N/1TWOjNeSq04n\nw+7YPD+Vz9Odbl0MdChtDrO48H6JqiK+p7REDBsjIyvIKHaSoCBFf6jO90Ep\nrMR3bP3RFPY6y5sO1j6Uc+P+w27VZELplv96XuAOiyuhX0eGU/EPWmcJ5lsc\n7C6kgPB2khf/ppc1vWaKjHc0md8KvZ4qTDd3P2eqG4knoq8SMtY8ZMmsa2Mw\ncEdK5H3xk07X59rwC3in9ZDGoRmEx0mpJNmyO2OHZF4BG3cNn/3i8PGEzLtV\nKLj69ZLoSA2yl8Re2VfXNxBU6GntWHZap62SgEzdFFTNyXgeDPvwcJfG9vnf\nS9HODeuACyKFyLwJ5olOoy+5OHcfeiju99IDKB/McL32SDWAifW+4vb+MXNm\nPfG/ydr57Qo/XTA9bEVQwjnn3EddmoWO7bVLQYrkldaeEmLgto+WyK1Aiq8I\ngHrlwbyKPoujdxUOaejafcorzV3+OVXnS3/3JGwikmaD6AJDO/Cez32Wam+O\nA9y2h+i7sfBmrkLYmk/1r7HbrEpfnfWFbtgYXwwg4w/dHRThOxs6UBKJ+CsS\nNbLR\r\n=Z8Oe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZGe8/yrNm9NPwYgFxe2hX72L7FXgWX5buyNH+jxfjmAIgGvTeVld8DaUxfSa06f3uRATcbjPrlvqXCb0739kYlJY="}]},"_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-drawer_0.20.0_1607034518987_0.011941096056785172"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.47c7d7e5.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.47c7d7e5.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.47c7d7e5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"670d83aacd771290b76b657bfe6ee631865c037c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-qky7qjcWirXGy1mq6Bd82pBgNN355FDbrRsRMXVl3GPQ59teZG+byRkJVn/dUbsXw6YQ9wPvHpQrFQIf7dyktA==","shasum":"2697590019a55338d224b575cf2ba6d29a49b5cd","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.47c7d7e5.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf087oCRA9TVsSAnZWagAAr7kP/jARt5obrb9kxQ6ggCCr\nFnCAJevs9/cYaYqgq2ejID2otC0JbqIXsvD0zIIZK5LfEPiKISyI7DgDQeAx\neF8Rpu9yeGyDs3r2187DvXgXEZ/EQ2riUD17Fplg9pYF/OP1C3vbCRZz7urs\nRJjIE9WuuWQNRZoDaQmmMqPF7t/DjtOBcDvDjVzFR1ohSFw9Yd9OvYBJBRO4\n7Za7XgFQKP9bhAVDoSJpIGJswaLjj2h3fy0fQuK6+2sXfbnEbR0gsqfXaIs+\nE/qDh5brHNnFz2cUUvchsPOmh0gvesPnLGTN/1saVAjxZ3dP9bBOJITvyGcG\nq368+47AeVhCg+LkoipMm5tPupPdCwCwt3TNNCt5N8htMKcYd6FYT71NS/Bs\n120pxKEXht/JlrP9cadJviUxAx2J/h9grFwJ3PkLfuX5xgUMjywsv1WC7pxs\ncvyByXebXiJ6SayYfZeGODMjeGlYWCYyIdzX5yYu6y91EDbuj1YqlxDKHtm0\nPd2Fnchq+DERnBthMzSYdf8PHZoJUliyeOQs8ljamVSVct3KKUkqwivsJQSm\nUa1w0VALpCKWhp6ym10M81qMuNUAy/ZHA1rX+megKKDN7maqlZuhK6ifHd/K\nykCylk7PvM5wdx5AJThG9ZHwspd7t3xpAMxUTVZ11x5dFV6VE9sf00lXUpWd\nnzM1\r\n=AG4X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFxDw7VKvo23Y90NIe9oRvV1GhvoxsC7wDTpBniXRUKFAiEAqnqIWWG+xK6tDSRXWrH+iFX3n/tjv9X5KNUabcln0sY="}]},"_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-drawer_0.21.0-canary.47c7d7e5.0_1607716583846_0.08367821504844652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b304a78b.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.b304a78b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.b304a78b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"44ea71b47f36de83be1e3319efa93b6fd3690c2c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-romQXbAf63N4Yz8pVqYEuj8WvgzipU/1HI1+t30K5rFgRrORih+7qTtN0jBzcpEc8Wnefpy5L+Yg0OAzRbdB8A==","shasum":"00318ddb32eb87abb1fba6f612e81b6e5676b5c5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.b304a78b.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2RaHCRA9TVsSAnZWagAAVF8P+wfJDTqz7kvBUqj6yR2r\nyT177FxFIetSVjV9qzNYAxODS1djTO2BqZ7smRNdvrcu7gHij1/y4tv2SOBa\nHBVV2IBtkD1CokJy5uMndnGNGVialoia2IZQIVATcPypFVpM1z8c0+CIBrjk\n5dCUkQBQBBwaXeQXZRI9a5OZXj6NpY84PCxuipM64D2kKHFRS/QiC058UU+o\ni815IQHKfN7//JhVCks/CPQhN8I+NbBJ+UcEmrJKrPR9nFpcR65Wd6PSlOO9\nymSO/fOg+vUemhz+0K9Ub2Ok9/22GEQkQLNSyZIP8zdATtq8m4Qhwwm7yGxe\n/W4FZ0FpkWJ+WuSpnvoTXtYROhDDKSnvq075an9S6LfSKoI45qONV4Xil1tk\nooex1cnPZwZxgyFoGgwP1BZo+DNv7XDvQXSwww2Y6ialHK7qVxWvDVMY2unZ\nVA8NYXDJxChtjUVJkc2aS+A8qRUhXMFnQN4nR0Ys7IkWXlDI1mkolTq++qgb\n300vRyBbV41LtOtohmkwVC3Sa7lMkLVAlvmlPgaIQhlKoG0fwikhbcuW5OWN\nEv7hfQGl/2n2ZdOvAm5r6EA52FG5NpSPGfAU2I0AjtjlK9Aw/5FZRKB6QXyH\nRlV0MDBK5OFn5/LWU/wy6MJpvDRNT2fypYR/uZGstiVHK42/CTvw1eYFxxpk\nQ399\r\n=ci/Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICQphDjPWJFtKw3LnC5co6ircLkDVlrlEdysY3vdhQy4AiEAiDznHRkN20daOBD98DjYmZ4c1G+vNfBt/4WKR7UEf+U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.b304a78b.0_1608062599434_0.33659167512891286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.777c5fa4.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.777c5fa4.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.777c5fa4.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-1IoaKnw9ReoLH4GDKpPkrcSzzK2hT1Ymy4JUx6+vY2v2XkQbtvbrht5jctgDahUmAA60XyCzJjR4jI+yiitYDQ==","shasum":"c8075924cadb44c72579e66874f303d3c158488e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.777c5fa4.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oHcCRA9TVsSAnZWagAAGmAP+QD/MSmR4OK5T/aqHzi3\nBB9L4XW2Irg9t3NxYFOMaBt4foSg2sdCBspxkm+ce4qYmPKj65pAiSRS2JU/\nDHSrU460hnF+kBrP5GfOvenpm6cTLUeR8kcgwyFquBinrY1/NNGDkDun0pau\n3T2khqjHieVhpxJOLOTXAj6g/Gx0juy6EnIpKBwxZKSrEKhLXLdxgFuDreGG\nFvFhGSpVim8wAhCNScbhp2GfSM8kGn/MOLlpY5DCIbl2gCRpuwse3Z+eBmgv\nUmYVpE7XDZOAZRBXheVMQcWzPn9202nivJ+VswDdlZ85NXKOFPeF8F0+hapB\nzn8kIPOodOWV9Mu9L/iR7Lr8Kj4b9mJiWAxvWZQxHp1CIFv8Z8zjURRKMPvL\nIo0e21Sxc/a+BDzgALzaYa1DBl+w53gwKGiiduIuP325Sma18qR+REIC3zLX\nl1clFPw/E0Lcr2N39R4d0U1XxEqAGUCWJ/wdj863Yeu40IoGwn9PMCbRH2QC\neDKC0GFWc4DwHc3/ZLZTrpZBO6ner7LXR7OsuvZabKzAEQuHnoyN0eUvJFZ5\nYkVd8d0QZKiljdZ1kS55sdfdDvRaSippjWJXVsivAtYEMy+1dbHhXJbHTeIP\nXARJ7TOxeqoqeJXvFn69jUcwanzKK//A3baN2N/NoeLsdFJi1ilD05y1g/3s\n8Scy\r\n=0kNG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHgg928fY1xVQQAm46sCBjiuHCsPCE1Q8n1QyMZOfHEDAiBalLR2+c263A63ld9WUddYEK14cpj1SUYsVYen+2Ud/Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.777c5fa4.0_1608155612201_0.2657363537641091"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.635c7996.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.635c7996.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.635c7996.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a0b572136cec769df6b66314ae5710101b643ea1","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BSQ2CQ7rVqp9NjqkIxC4Ea2BO4AKRPZYj3BVrVvXQz1HZLBEkYTlcf6bV3AZ4hv+Im87oi5deAujjE3TKcMaYA==","shasum":"225cc6e48b2b3edc67c08882150108710b411939","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.635c7996.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+pBCRA9TVsSAnZWagAADbUP/2CSon34xYBnYUxb4n1+\nhTS/T7fOSAdWLB4B7/G+vabhDMzyarjiyzxcEdOayZYquWbAeEdfZYSUSmhe\nkI2JbBMlOJWu6liZIzf8bF5pe8cOQA2aLqT4J7paDnqcwap5LtckVWw0D8yk\n6jhZUmjIKoFtHbPqRI62MSlfbL/8F+uJUONyn043blvYopxmFd1GbsNz2wjD\n4aHlKtDD3nQ2bEs6k//Ok8cTj5y1pcRgOFBd6wlvsv++14TazIBquDdn1sgv\nXF6XU59PTMbhrbCDUTRSiZYJ3Ge6k6Rb7A+1n28x2Nk5fXal4dOVRZ9g80Ej\nxX+pIE1td7+T2CPw0pziwHF9LySkjddk8hRfLnRmbEntTOXFsX2RFhR0DzxZ\n4v4kUnsmQXjgzsxSvVSN9Ck7Yb4MJSaXPerLbM8V+PrHz/gplnGMEt6OThxn\neeeIfp0v1BZmHlAt/Xu9ykaAQ106fNdQepvCvR7e/CDcKggNIdppb4Fs6rfZ\nhfaRsANrbBeAXFgEgp0ljgG/TFJSpKSsjn9QZaPSFXFsIoHR7LYWPw7i70yd\nf6UVP4A1gAOqiB6Z7BVdYLmcrJsFJbMdv44FegjHp3UXfl11OsE3w8Nw1snt\ngAqH42zsCU3lMTtu0cIEdDnEYcgrYk4ztWMpUw6ebqHU5Qa2fxrHUlhzn37c\nDsJI\r\n=yMOx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICTLPU35DVCyItxUlmy7wkd1mWgBjJ5aJBjEvYO/RR/MAiEAj2uDDTB1ipqbRydEKEgxMLzZ6c5qBAeWOj8evaKj/5o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.635c7996.0_1608247872520_0.42734266976165425"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.20b0045f.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.20b0045f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.20b0045f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a6bca4682b5b0bc23e8311853608b98f5594831a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ozqyNl1NjKRYCGZQ4sKlQ5UFZTfKQQN5laX+XtTDI12npwPh/nGzi0vfuqZS6befwIy3vRRlt8vftTL8Tnktpg==","shasum":"b6e3b102a749abf48f4b9bd157e3aea4ec25d534","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.20b0045f.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+45CRA9TVsSAnZWagAA9hwP/jFZ7hMI6prRo5mLhaD1\nqs9jvOWaUiSC1ee36EcYZsK8xUajV1R0NfGdBx2QnDwFH1esv+QqElcF5QBs\ngVqLla6ukIH8/jkhBBcX+PNzbTsOivIKnP4nj2n/x1HdjMEVgwOd/wGcJGQn\nDN6kl0gHVa3NUXxWM+c6w3vSBQZRxHu3ASnxfRd8aatgM6Luf4k/5nyCwsXh\ncxT4CVoNPC2tMAQFDqwcBQtL4qr7csaybBGQzTQh4bEkxGmTxc432CYOHfAc\n2oT5+eKJxrCeeGURZCHTTLiJ9wGxuqkZ+HB0LUMwb+bUMnQeKDsYaS1z2b5v\ntOjlIwFW7UrVLzcIk+/PgJfCvJy+nZIi/7GMqbvNPleNnbZzWrh7V1/jUkYz\nmYDML/UcYnJCW6ZQtqY4sirSgcGDT1vrMNm2K5UyHfA9LDTkVs0ktFiJI7mh\nj4u6nF3txuxKzxJttdnrycl4p8/8gzupalSnulCrzODV+X87tSveBMR2Anpl\n3sNZm6nBtR74S9J458VxD25AF3pEACEcEl8VYpgTPYoSzVQhTIvgtcnuly7D\nD0Wzo9cRtDufYP1Ff7X7/ccSu4l9OuWXD6qKOuzstlSobYwlzfwGUgPsrphm\neseI1ixmva9o9tMVq60Q8DYMOTznqHeDRTdk/phm3RRLAIy8Chs/qIanwsKa\nF1n6\r\n=2fEV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICWEZ3NZImH2Km8Qh2T/gca7TU2PJjZnPxsIJRnE3s1DAiEA6EMQsGzpL1Aia5CnySiAZKiQafxMq4d2bORMS/+1T4g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.20b0045f.0_1608248889183_0.3334956384397456"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.41f77000.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.41f77000.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.41f77000.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"59ffc250e9e7d85ede63c75495b12e981e365677","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-U1pY2OcbOhSofTjG7X0nDDkOgqsH1qzG3KwIHgdzZWGFqKfDOBJ8vf+7GmWkubwEH2cIyFmUhTwdTv3lbntavA==","shasum":"9274155609497d96e875b77b3eb69c399dd4f2e7","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.41f77000.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/kgCRA9TVsSAnZWagAAoyUP/RC7oFPkDNQ/wnl7MwrY\nNmO+qzjLL+llnhhJ+vKgmXQxi5GMd8t3AKumMXi51idK9+DpevruBJUIMPa4\nxrRXhYPB+sRfFSNgtLdUq5Lg3uO8uRsbtGsKNW8i3UPttX0lIV9e/rSysFQ7\nSv6VMHnHX8KYxZGOQq/ZF3Qy5Nf7B61NzuJL9Fxrqake4l+mfmQnzym8H4CC\n9wo0YoRyY3NsyYpOIOxcFXW/thtLglXtlMpn8PobOGMeuL5jltV2MyBfBVax\nVDl0qwaiOyAr0E6GJAF83JosJD11EMiLgu8Ss3iY5aREDIyFjSa3MPyoWRAr\nS6drMOEKKa/E2me1WeHQ95i+iSGMSLUzWQhiIlY9CzRhrpCt0LCgkrfuGsHo\nWZbiUVBv/pQfYF2hKP9eur9yzqc+3y7J4Siz0rLfymk38T4wU9Y8L46PbrFP\nOB4ecIvSuwQij4vmGRJiUWeTJ6RjTfu/L6927wLeocFvwO+9jQGpW+8NsNhz\n5rjBurtVrBIla8irqj2Bnw13qavcth3pnCl5klJ04XrtNkZDy8er0RADCzta\nHd/FcgXg4C19KYHkkoeIpinlmaDD/oOVowPT2JU4moR3H9dGO+tFlPLquDIl\nWYhjduv6+GV8c76g6VFI7+iXHed6rhrGUfyg0BO+cHun26ZXGvrk27eST/Dx\n/DI0\r\n=SUAJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF/dc49mgCqkQoQUBnYSN1IC6KlKDEKzTDjqr7hZ8lKNAiEAwNYsM1gRHR4lYiy5WvImHB/1Q9te9BXmssbD6tSf1YY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.41f77000.0_1608251679552_0.7100997826937263"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.afe4079a.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.afe4079a.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.afe4079a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"aeb3539e673debaa2381e0aa7f186b95e91ee563","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Tw2SFsqq3B7I9/r1IG5unk7xT9dkIploUegIa/LCVu5Nv/6xUqBOLx+LJCzqpRLcPhx0oe6dgOLBXAlAPfHV5w==","shasum":"716b1987776f382d35e82711a4848aca14debe67","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.afe4079a.0.tgz","fileCount":13,"unpackedSize":57351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i9ECRA9TVsSAnZWagAADfUQAIKHV5wbK7Mng3CAD8aI\nymg+C6leB3w4I/8H2vgQsGZfnqU5RgrjtOx3abJLrOwyq7hmwWBBS6M3JtkV\ndWCIQNhgBVi7SJcrWw8pVub7Z8+ZHZMumg9HWTexQWslDCSW7xeSJkEQeOpv\nhjxWeztdW+dQQSAXPWjvOyYjVCQRFjcaBNHtZ1Xd2RyAYRDN9L+3NfyhWfy6\ngrYhHUohjU4X+H3nIp1CR0qUzuA5bKpX8n3tSugTFsymLMfzpgZfIK40XLkg\nEtzx+lzv42/vBucFGeLArV6F2gPJRkd6luQE3H1dwT1GhoNwEabyf7IgqmPy\nbenZmIKqUf2RWP5ZIu4N7iWUqwl8GsqwFI+ntYGWIgBd2dWjGSATO5IesCTz\nkI3u03y+1BqHGVURwG68mhOnSVC9sFh9tk4pHYBelP3Uspj/7xIa1Gyxsy+3\nHboKp+o9wu3TtlU2IkQsIgFtFhkZ62duhg6Mae7V+XOKL6yEUMpnABu2iajg\nDhOvbyH/b1lH77GcEAHp4fUcG/Yf7wWfVpF4uJlur0wr+aZWfN93Xr6mdPNa\n92+ak6quXR/duf0IM8t1GtAFxV99hcBsKV7W/hcQHL1p6+p3KdYXFfiBUf0J\nif6DJOMYsqxP1tXYo5MP9viAd9UsZhNwEA4PWK/fYz9J+tk4LP/A673F3I6/\ncQAV\r\n=nDbz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG+YLj5NyiQqRep8fXAQeWE5SN+INkwymxMYhJoBSaPgAiEAtI58FbUCJ9nnPK/dcMCkA9lreOf4YetYdRObd2tck3o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.afe4079a.0_1608658755845_0.9368657870557764"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.407ef8f9.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.407ef8f9.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.671d72d95.0","@material/mwc-base":"0.21.0-canary.407ef8f9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.671d72d95.0"},"publishConfig":{"access":"public"},"gitHead":"b600a06f2f54a052373cbcc038980333a8068672","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-szXPRyq2ftLVrrNO+Ndu5kXeiclsmQAJ+EwbU1Acs95aXW/gM1kVZveGm3ibdzSGGKt7w93pv7HgOdEr+CG0eA==","shasum":"d80212cb9fe1b7e4e9697edf86b62419deac99cb","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.407ef8f9.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7Qb1CRA9TVsSAnZWagAAd5IQAJvBG+7T19Mpm0S8N90m\nQFnZBZYY7vxhEq2yI4rUMWNF5LBN4mgoKPAsEEGXR7fOCRQe87QUdqnMjgty\n/oaOOrDnK2uKHYtuyLhHtQBrV+ZrV/BQ0FlWAGnNpcFCpx6uGQ3aPnQusu2r\nLBUHI1I2qJYtlE+jXMplvwblhRcbsG2EKRmXcDuJHjdx1JOLu8BXGi1r/fup\nma7y2U5AAZ+4Zbg2kyI2gx3Ibzybjy2q+R68+s0AL/Ui+hcWHpw1g38rXZGl\n77+Qu57MtAZ/haDSw0ES4S1M5mf5axAZoGxjd3wjIYC7qkjKLwks8URFWygi\nUaDsm1fNJRt0utxuRicG3BD0tpvZrxYwFdCLt5ZuoIyeCxThYKnAliGtqPEh\nElX14F9Iz+BJjVfE51LjvYzaMotnMtE1Ki0k6M19DfSwBpQg20VRreq1GCdj\n7pzqWB5FBhzk+eO3S0BwVIgbqFD9X8kIeOd0mXd5rIgAuaY1oV7RupyGNrUu\nu0fWnnJobKTBQodP4y1IfLYlAexxyzqsPXsaSnoTaTCu5vvmQK/avxRmm7IS\nNANx/LOGSdxFrwfWTPa8y+HyBdrshU95ehrkCcs40S3rjY/8sJ4kuklg0z8o\noerW1hWiN33N2gfu/v0QIJGZtn5sZflDFPZADF49kXC1zBR8VtyTII0/XR1W\nelao\r\n=taLu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH9QLT1qi9e1V38R+T5zX0ams2qvZOFcr3qOyndiWCxLAiEAhF9VyDUqDjb2PQxTaasDeiYjI2qaJ0C51rqJ/sPlll8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.407ef8f9.0_1609369333118_0.6657147073933489"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e26e137.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.2e26e137.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.365c69360.0","@material/mwc-base":"0.21.0-canary.2e26e137.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.365c69360.0"},"publishConfig":{"access":"public"},"gitHead":"cd3d92f8ebc04ae6cd6d286c7983e3028e380428","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-EiPngLDi2eT8ncbvYiHTwU6IgLWcWSqoy9dRHNA26/o0o2bkWfJEuHVWERro+U3TvAp0tLSUo8dBFF5jDWOnSw==","shasum":"77e2450c7fc90ac947881405a2b848b46ea3d45f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.2e26e137.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LSgCRA9TVsSAnZWagAA1t4QAIHcb0JdkKZIA/Vh0WOZ\nQhQzcb4qSrBnPQcHYLveE6P/RY+uYbzW1A0WrAxrRQyrYjFxLsLNaU6d772v\nxWzdPkiDlyBGZkuL00yGhFShkIOj69rVFkJJ2qeX4uloNsBS2wBjy7dDbpRe\nIvraomXddbH9szYCBI2DYAEsKQVXL6uKzwRxFpxrvMqbJbXtRf98zOa7m3A8\nRUJrBJXeJlrnXFSjjSL1seWMlXJmIq+10alzAMOTuAk2OX+GDqBa/a8Ofvc0\nCb1qicTvkRqpuyd1b2xXZ+zVAds8zqxv9XN2KMmg2s3Tcez91AFpOrrXcmUD\nQFnONWYOg8SU2PwR921Bgyb2SjHYI7Y97EDOtUpYa++rWGHYHJkhm6sCt8bG\nb7JWINdc9GlL+Ka6wDhaqFjmQiwioAGndi4fnMuGBzdNZHVRYndy77NTKBa2\nIif0P4ntTwknOyBsuNKEzRVzQ0IG5tOiupFXqwJwN8R4pHAuO5HU5jKERDnF\nsO8hThnoWmhJRUtStqizDNfAgD79w3OsO9phsAFh4+9XYMhBrfaSu5gmi6rC\n+SG9LqAgexVYzdFl5BswkX9I7friAUXfG5T8mVNmhBVcuGw14aezPm3GvAsn\nm8Mm8pHLgNPAHFRzNvGL38FQi/Ea0Y+JMUw0s7y+xsJK2bVwZcr8Im2Tnwrc\nmyvt\r\n=UnWK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDO06To3DJDsX2N6GM5rbWtxwwivPO7H4wIKrnHNUdjVwIgcKU5fqFq6wFq2EwuYbc6Jm5g6gcpe+fjovICAQFDfOk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.2e26e137.0_1609872544436_0.06463814700911175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9009f6c1.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.9009f6c1.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.abdd10065.0","@material/mwc-base":"0.21.0-canary.9009f6c1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.abdd10065.0"},"publishConfig":{"access":"public"},"gitHead":"d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-D9VrAjAVx12HnJEZIM6uB4uQL3rQ7eYeHeHrwY6Pn/Wx48ziG0ZjvwWfRFjkCWYpsg44ZaepZBLYvhCfKRqqug==","shasum":"e1141c4214501c2d470f48704bf19e29752c6b7d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.9009f6c1.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+LhHCRA9TVsSAnZWagAAqYQP/2X0C1nxahMMfx0PByqg\noJINjKFP5ewgahIQOxKX+EnnAEVqi9a87EH7bzsMAB/VQU7G3UZs3SVFIJr1\nwy7pdMA/aNC3j2NnupDwDmpx+4qVMXwueQQT9raRkt+TaCmhsQve0KUv44kk\nXlcdfAooDMQMoa7dc3H9DKqewzCZ6bXRPex59vrDUZBg/BE83ljF1O+HuQZ6\n0fPTpJg0u6I9/SMJaKG5M6JWMegqkRLbbKnX75o16UqN0t7veTtZztv1n2U6\npT8H1fpWEtlrH/48f4XJWoDttLGoVlSd9lGeDGudMUtz3gN0mGqSc76X+pOv\n0F7X+qYLV+Ga6VwbHvNjlTUxmV8pb/q/IovjfokxYBirGiYKRsvKqpJ/f6wX\nvGR8m9ywpiJOeGfXdBtOZc5KOREQ8JoEwSNCIGvWPZ8mSXicFUz/5BIZPAtv\nAGtbs8qh+ACXfZ6ee3JMGJvMpIni1i8/cpDQdFhGgkpEq4JvXTM6d3RFzG61\nEY7A+NyxkVTiW5/TINUrSVVYTctZCZMAb3Q8FDq1fmpjWGOxUwMthlj2v/nj\n0kHDQFF2PDjmJtgF0yfNtpf790RxTdYbOsz40YLHdGesbBCQ3ihoGxUZ5gjX\nXXC2uUkppi2hPLpdulSNjcENHciSCcohseQUCo5WC8O9P8+j6+MlFUHLo6yW\npPOH\r\n=FHa5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDYbb9Av5S8gIfLeLhaSc0x86yOkU7kTOI7tjkd9p8yXAiEAjlU9XLS4RvSWszSc2akK7D1CPCOjc7KFqFG9t5Gx7F0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.9009f6c1.0_1610135623444_0.28895266849512935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ee99b646.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.ee99b646.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.b8a1a58e4.0","@material/mwc-base":"0.21.0-canary.ee99b646.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.b8a1a58e4.0"},"publishConfig":{"access":"public"},"gitHead":"e3bf8197782f6099f32f339bdbc9218093828cdf","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-3SLkiWHMFZ6fjXfl9M8INWxXoNwDXQOhM3B6PKL5cPptyEye6D4eEZbqMw3sRI+llQPhjHRnT5YZhh1BAeJS6g==","shasum":"e3f09b0665bad1211e02d1d606a6c5aa72d1e251","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.ee99b646.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/No4CRA9TVsSAnZWagAAa0gP/11kAQSpcvHKEnRUIBc4\nk0P2Zt5ftljsGzNkT8jAhu97+fkOZ5DKj8/Jf+MqxBcjT4qry4jN0mzdyVRT\nA/SzU0kT3fndyZaYuHvX4XXMP7ODtmIgJDE3vUVck031uUUdvh8XxI9isbIm\nw/sNG0CTiI76WocserFNuh+QjKaifsQKMgVrBpLV0mLSpP2X76ftbSIRz0iR\nb5SLDKByYVdaLFFRKXJcG+WBr8qCjmnmMJQxkqVEzOMpLDuqXqPFQQen70v2\ndLtKFKAbVuF3A9VaT2JKeMm33Z4t+RBzBZJrGGvaR49n/OZsvi0PDsnqY286\npPMxz+ZZ/wLwcvJ8jRhAsGRUTs0EqBg1s1Qj9DoWI/VnP+jXWNbxgMcGQ94V\n6N8tLtuoMj07puk1I6m3/BwkuJHZWPkMLTAvLDZCb1sp5YHk4ebOpvSW3IqL\nlMKP5TvboC4Hqg7YSdnvsqCMpeMl8r+N1dEw8JS3rtb1kDd4k2UzaQjkHwrM\nWBtwNQVdiIdl7rwUXoZiS8ltl3L2Ml0VgkLuKrr2f+d6e7lBE5cqx0QQqcn6\nodjp2NdGFV4wxZCwS6zwE6spHF4CGB+Q7NBjKQfDnTj2ARFT3vWxY6xXppgW\nu+j36r7gOzzaZoKkEqq/mhs2xIbjMKeKm9e5FwPIyaAII7Ti1a98qTLtoNln\nno+6\r\n=jpKO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQtafA3eOKFXba45+/HFkD0/tzKjisTyrvPifnWHYlNQIgGGYgQIC5dWX7o2Px2qOdAo3VAW0qmcC0OrcSAO20JuY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.ee99b646.0_1610406455650_0.6811635861592815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.740ed33b.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.740ed33b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.740ed33b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"fabdf055e5efb9cfb69ee02c46f968eb33e417e2","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ONwi3jEaBvLd+XHSv5J3y+7UTnwsUQWYeXvJt9RJwnAtCTUUv+Q8PkttBzvVr/XfZYVsf7y9JUwXspyTjE5JdA==","shasum":"eca754cca0e1561013c649621d1243a83e747c5e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.740ed33b.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eRxCRA9TVsSAnZWagAA9CIP/39FtEBRQrn9f6mzjqKh\nM+zuGzU+IOeUzdVt38paTHEd3IMAjmH3xMgmhzPyrYZ2LzVvjaR5id/laeUS\ndDqIaFJSRh4xRcFPDo180T8sqWXvog1WooGcxBGLDOZe74yL5s4a7PYhR/aT\nTW+KvYyg8x628NHcGeCRKqbRBD7LJ6IXeyOo9V19Y9fMkI08s8OqrSS1kGls\n2NlW++nN8+90e8laZ/MdSkHeNziuuCRHhtf4EBN0BzAIydOARXCTe40LaKdl\nqKFyyBWHhracEd7EW7Uq0NBP6/lwiRQA/ju6y5LpQdiDH0SVGmdRUsLH4SIs\nwzXZCTSuzI0A4VGp37Vf8+KX7s8r+o0fXsRk7Qhc5ifjvOhPXP0Wtie/J3Zc\nF1a5hQoQwAVKKUwzbp0mBiUO0sOn5nuYp0pGD6V7f/8nuKy5EPN26SUllXRn\nVlNoGTLotJLm09k82+W/i8YVvFUGxYShTQoyWUt6qRB7VIAgmrZJCifC/0xw\nzSqSe2n4IafMC2zhMhvutoFSbzty6E1huAYFiOTdmkPmH+4+2hn+5TzGSMIY\nDRGDDXiwbf5heZk1yBH+40xUJHfYGvnLr0g2P313NX8riMp5hz39Ce7en1yN\nYoQkhJfzyH9UicjtENhnzlyXGoASEqNxXyUnXS4VciVyf2QDQXMoI+Vz3ID3\nuR2J\r\n=NPz2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZ4/5AaFfC64NEIT4GGfXZB3JhhxZboE7ClEx8JRyZdAIgPawXQ70OKpRWGSpdEbJpUuMhCXInxElKk91KZDC+9Rw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.740ed33b.0_1610474608720_0.9199226537520289"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5c541b1.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.c5c541b1.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.c5c541b1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vEW3Z/Z40kiAeDejU+xsMaLPM88YpXyXjnntHE2gyo2HzryxllRrxFFTUxKqbUyPR4YzLEeaOsUhPmS3bdPpyg==","shasum":"2a0e8f2ab592904044fcea02aab5f4d0f8011c07","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.c5c541b1.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e4oCRA9TVsSAnZWagAAa6wP/01PUGIp/o1YwbZbpfxz\nUCtEXQU3Hr2S6dGV6za9PYFuzgREqa1a4yPfihqjGwixsE/OFNZco1B7QnBS\nNv7kJLusfyYKpTWkU9esMN319gC0d6ThYFN7J16Zy/mq2OueNB+2G6KSb1MI\nCqiXo+6/zKemDWt1huVSTkI/dOn+WUlzAuNHbStJPVphVSvs3pvN6jBkDHAO\nPf9Up7kyw8x/9X0QtJK3MX+ZnGcSKZeS2EGmiYJbMhoZj6MNSfx1bLoK7iAB\n+LWKnfyM37MoIv8WjkOJvm0IuneDlKc/PRxZR0ig1hES5r1pxsufbC4ZSW6I\n6lkffk+VtNmn56QOBKgfGA0GFv8tTc813xzxKtUGknE1/iqzhZym6yfgSG+P\nhrg9nrpk/VNdLDnIa18t4+tI+Ea6wPEM+zUaBe+s7PGJV9RJ84gPIiBp1O5J\nHpVWfL5wAH4IIgFXgkS5YX6zVWVBEXVBLmPcqYNuBV9K5ooSEZw7Rr3zBND3\nxHsUObPCL1HVT02RBfsyw0UdThkyFRurjiW9n/Ljp8QpjSfwPN+BosPok+xV\nOH2CpjUWO4hbbqzCmAOEudpz/q5tbXGB9jqmHfNtxLs5ZMlqvx9hH8lQN+HW\nUIl8I61d21bVhofWUQnOcwPnjNkPpQS161XWPOsyxYVBLcJp/KWkZ3H9EyND\n1G9r\r\n=81AR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2VZ4N5yIOxfuyZ8DeL2i41wGJ7T0cxJL8kQBwwBLZZgIhALib+W1Lfe507zFdgTrz20FGLME16FB17F0+d0DnOXCv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.c5c541b1.0_1610477096119_0.5452863279711013"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.06fe9d90.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.06fe9d90.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.06fe9d90.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"99a3aeb2c1659185c9597a59e5dc7599bbfd52bd","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-xSA6Uqq70JAzNYW3IgPYaLfxl7xBryVl39slM7rWbl8h+AnvpDtqKOjtg8R2UKBfzMk1DQmVLWyuEszDkkWMpQ==","shasum":"96598defd35c47b9ee5571944155e02ac36319e3","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.06fe9d90.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gyCCRA9TVsSAnZWagAAlEwP/0XYfiZ/SvNRVbqK2lNy\n0V92NgBJr2KF/G40mp0j/LsjekKwRfQF2oDWVBjUu6piELEZwHP54iLLtkqu\n6hzOzk4efTiCnPtmgMYBXkyQQUqonkkNP2Z7N3moZzAy5ZyomD1mwNfEBW26\nt9qRpGDv/JbCJBolqkUf1T48SHWrqSeyxD9UMB7PcuNIQD/cH1eIxF6g4RQh\nxgpsOQFPRtFmsSD/fpCOBwyO5KHAKNJFpctSTXiaO0Wu5cPtU4XUMqbVxdbl\n/Z3fhcmfV6V/Uk15X5dMZINzCrD3p4vw08BZhMPyMaFuwXDJgllu67WutlqY\nQx5TtOhq6jchgcFDDAdqTahfgYkOHIdIjNBMRVnQKJKIqV1x5kH0NXGLpDLm\nfeHaV6iqoaS5I1vBber/DsXZVMm2P7T7pRF6jDz2wrjKrIuMgeEdx+qhJNuK\ndkXZfwoVaGNLgYvcsBckFjIWGD/2cGTwggGVvAUvo+tpu9eTDUMrOuphzP/+\nAT1vBgdt83TDtkr3QKQVrliPjH/7Fgtn4IOScmB3vP+3JKni4y8MsmBhIfM6\nmNeOqb3ShQ5cxSaYQ4d8lobHUKOoVTgWBjrhPpDJlBf1lBFMlE/uF/um5YM+\nGoG7OMyr+ug9Rv52YrZ2M1o03+RHcU00FJQzMkXdUzoHzaY2UzW0oyv0bv+o\nvuD6\r\n=lIG7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDS5Jmb22wLMRqLTgkwfOn7vuaSle0Yc/J0L19A51d9aAiA2qczQ6fsyd4y0Y+KCkuDQj4IPboPxQuBQ4s+LclLecw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.06fe9d90.0_1610484866098_0.7195384412856467"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.269eed01.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.269eed01.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.269eed01.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"537a9df54fcb929f413d5ba5af0dacf0e2654c82","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-k4PrFtHRvoRpWvN8Au3r2A71F5Wv91ORTCDdsECfDKhjvpQDGlBsC6EEe7Nv92Pyr8T+Ab9ja4fVcpAT6pADBA==","shasum":"31465091f7e7803692d72aee002bf8cfc7592238","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.269eed01.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2nMCRA9TVsSAnZWagAAeFcP/ijsq7H/pFkrcKqnHfkS\nPsxrwH0rukTNq3UtFB235IsKFyCwWD4YtLsMe7sR5wL2YuFFQamHRdD1H2T6\nWQYKb/EiKi6pDZInA+0NRraAqmUMshleZLr9uLgXAtZGPIZDv+ey4S4cMFta\nyWvJ9w5+mnNaGb3HyZikMxA8S/DppAZM1f1RSK0wnGoUZY34Foc8WweZ+/U8\nuY3aKTsWqpkz3tB9MK9O+pgOzLeCRZBOYrN2y2kShJhXu/CJ+P7YFnxinBzz\nJIR7qaaRkTHocZHniTDQ1GsICdEZcxdy14H4j65tRLIoe8URAmY79b/8FC0i\nmfp9xocKaotE1JESDDJLgf5g2zEeVHJq50dQPdPNPPCgi2nYKH6h7hcLEGmx\nDyGEJfr3HU8eLRfkoFXxgBljQMSprWO+0KHV4P+p217cK+KQwpu2iM9vMQ65\n+1xFrppFdst61JxhH0xRfUFu3h9TACB+Sf9CUVUy0yo9ovZHQgHlzGwzzr1v\nsLN8ZvOnBmydk+Ay/1NlnmJf89vix6AK85Zr/fXQTAKs/FzpcW2N13hwmGJ4\nPHCq4lBTwPaGld1QSVe4TtpMC1LFrTNkVhO+JsjFy0k2wvZ2FDqE9hu7Oydw\nfNoc4PLUU2G+qGlelePpBzznIVphP09wCiAzfSdRETteX36qINjaiWu7wvhZ\nKp1w\r\n=KAzU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXMZg4K87dKXKfUgitQ54EHz0E15k7i7PwyMRYa2vcEgIgJgDMnvM7ZuAZ8gdIOg85JiLIzAzxhQZ34wvyBZs4dME="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.269eed01.0_1610574284203_0.7251390087346032"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8c075f35.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.8c075f35.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.8c075f35.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"8757321e04ca4329877d8b8c9924f78bd58ccaab","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-arIt/sayfpt2EsyU4m+gdy5zOJTrmYHncpOI9VfgMc/vdU8V7kXatJP9q4HtWUssb+d2FDfUKvYpRONAfCMeFw==","shasum":"c54933b9c3441fd1c92da74430298cf53327d6f3","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.8c075f35.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/3ztCRA9TVsSAnZWagAAbDYP/j8NFKooRH5hx3N5kuLf\nkxS+qZ9c29kzvkA/egIJWvBkXu/X91M3XdDku/Mtmxakcpvdqr97JxEbiPQk\ngS5CldxSuEK5S/uyzYYPvfR5J0FytJnVaDGoQietO2t6InPDOLemWlCn+luo\nL1905knxL4W5ExubC9o40Mr+Vc30+YOb4bmPadS/NvOU1Vy56aBtMvqvrk8Q\nFh97zDWiJDdA/1qLvId4a+K0Ii/vSsPwphiE4rI6hqm9f2S6zpdzPBQRulk3\nH7B2iiVLreMJgnNDpRd6zm4a4zvnlpNYE1x/mpzwH5rUOXUvBmRObH7RCN/x\nNInQGFi04WcSD7YfGMzkVWYvhNZQKHfOc981akbhmIE6Rz5/wtqZdtl12ci4\nZjBWzHJrbaezeR0Lg95OrgSHpWmBVoxYFoUMALrZG19s4u0A6iK+5Ie8QzN0\nhGAPZp7l9b9vAayAos8fOdP0E0ABnuBm40R9Aj1nU4U0OSvxuNq48afjtbnu\nvQ+x0zgm9q2mSOCZES99ZloymQPpNZAvaV8eWsg6ImkTCQYsm6ntq0+R5col\nXVjyjrRYxBA8jQNDjy9q8S4ASeOXxYGqoSljy2KWzHLDrpd1Idv2ftGfN0Pv\nj56Fm1hL3fPVRXDLStqvdm+2JTuplwSFbP0eNrbt1VG9myqBp/M8B4mUJeGp\nmf3j\r\n=R4GZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiimtLANA32ngBm1adLnhyho7LS5q6Y7e6uX3bA9xm3wIgAfF2jbVjnbEL4KTLsR4FXKK7/b3JP8xwdv3UMq+0FCc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.8c075f35.0_1610579180739_0.32350410534847085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3cda381b.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.3cda381b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.3cda381b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"d660dc72de8b9d23247ab075b6f4f44053c9cb70","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-FOhOuPNTKnyWlCmcuPSfSoutmL33p2UKaxlpkgTae3jhUmkGdXI9WecjAFNtypecO9Ic05q9ukjB/9lEMNScOA==","shasum":"9d69ffa5c3101a10d639312f853236df112797a6","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.3cda381b.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4pzCRA9TVsSAnZWagAAH34P/1keiRMeD3m4YYn47PGg\nTioV30nH9eZO5sq+bdsruYtuAWfyg0NllgfXhSwCBp3z8EXuELm1fzw5GCmF\nb6QlLtO1jrsv+DAPzK3387MUDFj+Tf8U4Pu5PSXFtEBZd/s10lpME1AZOdNe\nfX7j8A9J34V2BIOKXKgoc2oE943mLrkS6diXto0JTNqEP4uSgGMK6MV3oRgd\nIwd8TjLCg9MtgKdFSCa7OQsjwsgyUwMZzBHJyEdQDVFzRZKKfvntmmcvQKf6\nJUQYffVvz8WCAHBMHYeBvYDj89xUz+vw0yRWzuswZmzVsVgPepRg6hyq0bKC\nHXv8lN683wE/Q3YKJPV6kTey3f3qYI18Chkp1x1jpRuY1kyge3dtN4lZG96F\nhjq1GSceRXPzOWidCq7qV4fG//bpJFl/2b79b8tTBUTUDHhIorDaCtmvYvl8\nckovP+UqrxbZ9WBRCe8+bBe1Oxa+q3tzFCY1tyO+HvoaE8Y8tuNjNXOnwCQJ\n9n5AN2G1w42zbMJQA79ou0CMD/u13O1m5sPGOWV+8ZPWVNfk7Rtl+h20KYXt\nQqji33akOcrvQHmCiF3dThuwrzr4YT0OuQutR1Egt1mGN+coKbXoUP+6HBEg\nn8Y10WOJw3qmx2zdses6MFRjiNNudp9kUXeVWDcgW286SwDRJ2qasz6k0ysM\n5WV2\r\n=iG16\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSeYQtf0KarDiUKoLn+8nhecNsV02URAxK1Fun+SEVVwIgAtUsHxqiOkLZbkbuuT+goRDxTMG8+3NvxtLe/aExh+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-drawer_0.21.0-canary.3cda381b.0_1610582642589_0.3196844176834188"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bc113605.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.bc113605.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.bc113605.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"ec7a00c7b7cf2145c971f64e88b375c09a5409af","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-k9ke5SsgRVyCFqaifgG7okaPC6J4fDcBXjtTzaGE6vHdsDqqtl+inRdvMX33NBfFZMeibuaO1TfY82EoooGPnQ==","shasum":"868d42f26e8ea5d931ca2d599727d6434b2cfd61","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.bc113605.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5QCCRA9TVsSAnZWagAAiF4P/ikN5nat9DLonaLAdRN2\nOV8eHxpPRFVkw1luhRfNZ+XbQ/xkaKNwmhiPRe21ebM5g72A8P/PfaGC3h5j\n94TSbUDV0jCqdRz/ay6pxYm18FpHSYhYuX1B5E08iCQoKWewx9hTBFjjUZ83\nG8FhcwclagVi1pp3fbm4cDjYYSePowRGWbWjud5B4VHYlwiylkkvcssUEXMc\nUiwy8oJ8NU/HjwPKdMEA3GsPDJ3svDYXx2uEo0l3SHe6Djrk2BpNCB9XEyGE\n8ppOjpQlyeHHEGghXboLygOZccGKcB4cqOgcEsRqt77ZrN/4pyYar2HWU1zf\n49n+XfxhGCmS/pEmL5HG+9fifGsnen4SBkUmYMDUrHZ2zaXM863PIx+X+cV5\ntgutkoJOcWb6HS3O1PBkENNL1F/Ime29B+XpETUq2cNO8BvH8OruE4mjOs5H\n5TpJEe+qvH3I5LCGMoW/IAXLvd1ALx+FykyJYia9DPIuGAK0lgCG1VpdTEpG\nrkpMWZnrxpDDZGfROHlWtV0AxFVkXkhBXmoe1Wn7DGCKiwCopSbGhdbvuUBD\n2S+5k/nx1aCfk70u7R529L8MYd0M8U2C3CTwX1lJs6YagDx5orRJwjRmQJEQ\nni/CNW2wzVClckMF3jrNZkQDfrosZHyHet8DsEPv6hQA9pVDdCb11flpOY80\nRZhh\r\n=D2j4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFP9MFxeQzuZKl3MkGQ8WKZmXgv766vNK02nWGtHpOnOAiEAixJvLZoPQkWRIJGdCrG47Y9CMPXH57ZeyJS1k6kBqAs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.bc113605.0_1610585090038_0.9968162909504081"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1d6ff9.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.0c1d6ff9.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.0c1d6ff9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"5c7f60619e642de2f6951662670ef490a6e46e70","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-etf69GNYY6zdjQTQoe0FG5FzLaePgTmHMiqxVf6sAdbGeArOwn+XzfS8qQ/EJ/iNhti1mGrGt5WvteQUgNQ7mg==","shasum":"0f61647928a7485aafe31ad371e2b136104b2afc","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfZMCRA9TVsSAnZWagAATnAP/011JSLoOb0imHOnK+FH\nLvnS86HnM5w+9hVv9cQkC2jbhhFkh7S+EZqXWHsnkm/FhHpUXZD5sXpzQrFE\nfrEYmK+UKY5ZwJBKFM3yxIIB4lhXTVr01pKt2+ymo6hATIcOVr9Tz6Yr7IZB\nRNKOtMatKyDpewo6A93o3xrUf09kevcc9uyZgiiD8m4H+IDXPcumlkaiPXhI\nyucOqycEJ+wPlHxU8onUwEke49X3f+umuhmX+Tsg9+qhEIy3dIJFbGuuDLBK\nFB6VQ2pG1PTtthcXg2gfoPmGvAFa2tci1QE9KttehIFIYhJOcgTyDwwWVmoK\nsI07B/5zeqvNVMZP3hYwapsbzQhOX1S1kn8zu/vdO3eg9F88DxKsVny8Sl3b\np4sWUW0yUvNvfc+KqJ6XHNoX5TFhchKpjg8fBC0z1QI0jjC2CJd8yExaobMe\nq3vR3CBQYwne9p4t066HRKrxmu9clqIONuqsotaQR/zdOLIWm2Gt3AI6+FUz\nfyyKn8QiDvxKlloiGGW85+B5H7KjDdI5oqaAgKxO/Xm4cqtDu25rFi74928D\nhxZnJOK6GCZq5CShz6mDP9A8Za8OWvIUJcG4nd6G2nhY6ZRDOc9HXz6fs8q3\nsHSsMfvFTnIRCJQe2GSHSGlDujwY6uxscdkDubIFovCpPXyeI57GHvgiTDjk\ncieV\r\n=FtMq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDPG/6Ir3Za9RVNY+doMlxnhlvwXytAfKHhFOLE8ggaeAiBccb3zkzUh8vJJIYT027IEgzk8dWIlBpdqwY+290IPYg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.0c1d6ff9.0_1610741324312_0.9071488547416802"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b4332e00.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.b4332e00.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.b4332e00.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"823027b19badea63e32aa35bfece324daba62e19","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Bciu9gXda7MMSGyVM8CVgfoaiR6NThCrhJd2m5jj6sf60d5HNDza3Z7Bo7A0Xvqw9xPIJWF7PczJdx6FOQPY7A==","shasum":"cd3f5542cc350b77ffb2a91e44c7ee4fcb3d4d09","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.b4332e00.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhIECRA9TVsSAnZWagAARMQP/RCD7gsbaZccNc6N9Vac\nlANpCZhdTlAL188ycTXBWYNW3cgXntCS+hmRBFIDk6gx53z4euwYvS1GlXSD\nWgAahX7fqQ8ZiSHl+Ltj2uxs7/Pj7vETyS9Z7L+HW+olPLWHQy7y5Nymt3fh\nB+PKPkvnAiGYC6C27tdPpY5wDokd0ukEmcH6CIxI8QHSCLnrf94fjJBRGcF1\nBDyyxZjimXbYTcf+ebyTHLqCsd7npdTlcqHJ11EaJ8jr4igv0CSqdacCHZ8m\n4ehb/RAherPbRhs+f7wIxogpNNFGJVFzG9x/O3HdL3BRsX/N5JDmtRh/UyJZ\n+dBlX6ntFKMT1yqJp9ZwJ9HWRbIPOj7t+4LMADki3vAZqNlicwtlDpHeY1TF\nhensuCTHkSTtRe+WpGmeXywx7wqp5tnqK6bzs7kD+bk9TrlCrTjzV6U7CjZj\n8NDzfN59kifZGcG8fApIVH5GZVaoguiJnlyUhtbnXGCjwdAId+FwvRQL7kDt\neN6v65vY1BO6HDX3IxGW3rvHLetuGZSfRwmovoSSf81yd9MWwXSsHidqYhan\nyAWYiDnmJli3wplKAOEN8Jm6vopNQ1IKOPJ/CLVnndIFKTF8iy76G6t3pk26\ngTSE7/yOoNw+gsDcisr9WLWDpDGiA3JrAr7Hxv+Peqdk43EX4j1Pg0pr3MFR\n2uix\r\n=fsDB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICwoxHtSgqp68j8QtMMl/AAi+px14Ol5QOAhh1fp61iSAiEAhp9qd/u0p4X5eexV5mVS4pn8CBO2/gLm3XW0y//V7Cw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.b4332e00.0_1610748420266_0.7893276866925658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2899691d.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.2899691d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.2899691d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-62Jlb+cfhLawhuGhPibS4xHzMm7eFuXFvo6seD2gmr2D/xLtgRNknGIDI3P4h/5p4mzqjTy1pwoQYkPNj9EGBg==","shasum":"ecc1db4de3ec7170a8245957f07d6b08f71e5ec8","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.2899691d.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkTlCRA9TVsSAnZWagAAVvoP/2aeiszfgaXZKR7VPNTV\nDaoQzyGcg05tkPj9Yldfm7C9Cx5YIRGAvwivCV4PaE27Bo5rb0bpkRxmKiZC\nf8PfkwIIHr7DTSMJUsE2bDJJrmO3zW95FZitz7vtEjoIwcFhGlXE6Z7p19rH\noX2dARJ46wzyNLGc3d8RMzD1oRqf458vSF7nvYVC94aDf38JPGRS+4P3imG1\neDe/b/L+Y+j3rt6qq5EQPRkYTXJQ5Ybppks8iuxlBgTW1R0TvMTSI8XuniwD\naHoLDzRVdSb+PfdPJiQSRq+xvdKEaqOh0lc/E5pnuMgOIxBC9a5v00P+NUfV\n6EzhhGgQ40cVaX4DNlr9qmdZsShdCHqlVet2lU8V56C0vjyekqBgGFNZp9Wd\nRGSYDF0VEABUgUiEP6hWT9HNoVarw/RLpeMOXxxZ7C77EMjVDO8LkZ3a9kzY\nPEDcslu7do4Jx7nY3wWm1PEOx2nfyrRjSggS/svv1coOmaKt3hsS/UN0/eD3\nmRcWj4WhOoSMhNtqjwOrArMXYRdm8zAiR5yAHH5EhDtymvAvXZpCiPwGxcVc\nOWXiW+2ALgMVlgAvOIN7TAFBBmisvNv0h8HSdbAr1U4ale96roVmU2HE0OBs\nxgppe69FvtAYKO2uESF4iSWDK5kDUo32LCw3r3k6JkspzVK9SceZ1XPV+zqd\nNI23\r\n=FDBC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGeE9sYJH0sZjixvnDxXNrXwOzupzUd6Oza0whZxBaWUAiBbtJdvxPsbsn3yAJU+V0+ULhGLRntzXyC6NjJKq5u/Vg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.2899691d.0_1610761444996_0.9534103320008032"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.fe73953b.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.fe73953b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.fe73953b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-wDDyZSlI22bziRMyvVeTq2tycSlHtiR57JseCmCbiIfnxE45aMVgdD3yy8/GKLPOTLjtWnYg1cnxToC6wBr9Pg==","shasum":"ad5403e0186c55fd3814b59456b34c5d85ca3d6b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.fe73953b.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzETCRA9TVsSAnZWagAA8s0QAJ/YfRiW0GwJ1Z/FIAPa\nWX8WDIydihZCmq4QBnKfIiJLPVIBV7m64klLAftxF0p9cHSKBSqWAp0RzPwu\nBeAJd3hgmwh22bzZlxMFOUoF142hp6TjIFO2WBtFN0agGCNx3EJKKDF4/CDg\nx2Hjf4DcppFTJCGdhQEBDofH3ex73Fs5qXk2bI0OctVKm+QUZ3D/aCfEaSAk\nOydz7UFecWRHajdfZHpwPebKahcbaV9OFghBmh2lUXpXNT4XYaGM8w6TwmQm\nldB0WrGeJuEQ29JbrjcjDRYeXUO+sAqt4/eVMcXSqxm4RBpy8lXjiQaskf3v\nrM8cisMkAyYrZ/8x4kb6cMvMubGyw9CBgwq75nG5WGAuH9jgvbbMjbPGSfDl\nGmkDgGd+RT7iOchVztYvE4bE6P8ZG3AbnnpdN0z0h7NBBqXq4c9Ealxktm5H\nsnjWK2YnSR0GyO7RbaWxcMLte8O8ubfZWIFF3X8nETYB8+ziySsROMMf6m78\nxxmhKqioZtgLHZ7vqeTOrrpNGr+BPOCVz+0Vdex+7WHPOiobssc1NmJoYSAc\niEKcsmrYzVWB3HrTndZ2V19yiHkLQ8LpHSbBvnPPJAo/OcwXDvl3crKw/8Hl\nbKsztQ182TQXp7NKkK3YJj8KqG1jnNerbaP3DNscIIR14JgvUJTRO9KM3mF5\nGDWb\r\n=MWph\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoe6eP3OPY30bDN4ZhQvokYwIe9zfNo9l0q47pyOmqWAIhAOOybckZ8p5Hl6qkgBBYYXP3vA0ztFFTWF+5PzHwEmQ0"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.fe73953b.0_1611084050802_0.9371761704957877"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d3a16455.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.d3a16455.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.d3a16455.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"cc074ab80b57efe95502e551eb4d0ce6a153094c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-3niGmLMJfszbeHbGHMh5YS+Jbtzno703FyK1QxNOHF0NuPktUzwogGW6kn2yES7gF2wvU/G+oCUumy9PgovmcA==","shasum":"8e571baff87a2b1637dba937bbaaca931a1364cf","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.d3a16455.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzhSCRA9TVsSAnZWagAApTAQAIr2Z6M9kiigU4MfWkB2\nTw1V480cNjmDn2GeHfWeh6FdCeqVO6U8XwIEetJ8nACX7sl7abbVSvX8NKWT\nK5IXRIPbQTt4kOD1gENJq1xGlN9uNgahxLcHjLjbyL3z3oiRW9XgWkl9hT83\nfuME8drYaFjWay0G+wA0vywTwRe+fP6axins5vqZSPdGNR+QUG+eE3oxyUcb\n3adki2kToU1hLQUPBjbEW0bdHUTf9cEaVTwLPrR04dqSMBRdMw1F29FvHNHr\ny+JUkmW34p2hTcm1R3+re2zXWOCZ+wXp+T7w2WZfp2Q04TQaIQ8PYaWaHZtZ\nWNFgenYlRjDUcijJnSv5hlXOsfIkyzQ1aoo0d58Hf0bb/8G8mJZxV+ekzwxp\n3CNeqICBpRl644yGmiJxEwkG6MUc1fK99ZoWs017eo3sWjQ2ko3elCjJOt3F\n7iirTZTHaZkerey/MtkMXzjiBISuOA95FTCDxwJgLnLQc+OdaSLLI3rIauVZ\nfxnd6wilXLu8SsPSCnhTLgxpG6USB/sHDJVWzSU6vwHF+1BU2geXDF30nRz0\nfQV/qYCF9O4arApxqVMHjkDrDgey30wdLXrjTpIixku5Gt4sHcLMMlps+nbQ\nAvPGqtAlsgcAfapBTmcU6re+YdBveGbQebZCwP4o6FsVvLLmusilkn6Es8bF\n6WOj\r\n=RUSs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGFIEsmwTjKRrg31ILwxl4cAsQJdIJ6qfghNUm05b1P5AiBcLZ8/msZxUNKBkzuLnhRxVe+0d0X3rEsCwLgMbVDO6g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.d3a16455.0_1611085906412_0.1326045485039169"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.597ca1b6.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.597ca1b6.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.597ca1b6.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"2dea4d182145f148cba1edfd7b358ed05bc6c8ea","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-X1MTwJCzB3/2N/G6US9eoOmsb5mK/6hpyySc3o7J1A/k0P+amIHqpN03nj/vnqognmOfcqDiytzV967D6ap4DA==","shasum":"06a19be8cb338718e9f2b799c981c41fafec69c3","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.597ca1b6.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4BqCRA9TVsSAnZWagAATyoP/0VWIzhSmWW5dNRpNuge\nrctezfcJPyfzVVaZUdev5OKoheOLvCsO1wMx/6dEwZENuUsyx8Nm/f8PR/CB\nj8NqEDCXdhR9EbRGj9dtC6+w8fmuPpDFY9N7dvoDu78XffFj1CISnBAlzUGR\naqmF45/Y0/CHM5CZgTIA4x14cqQwAKrhDWEl2rsN8CGsmlAoi3i3WXP14a/0\nt/S9efeeXvkxiuY+oeAz9nZGxxC9qj3KpCnNYc1tC4d34vZOGhFd4dXIQf+f\nIFbmHiX03kxbpHUypDGKj/xj00Z0fzzM5lgTBT3a+EAPPBmV8xGAF6MRhPQq\nJEOF5VWpolzEkoZ+rRw4nhoGFbT4ZhUmlKrPlgRJvO8z2DXYNkTGTp0et7Tg\nG5rV0nAKiPCPiKgCIJKgu+MsPzcHONUeTkj7a7+fIJEfGpAZNN5cBndGycAi\nNIZono+4nCE8X86fYju03sUWlRmg9taXM8HvriF9W/WW0PbMfqb8FVgUpyS/\n+YBFsdRkncbd/PFYeSSZILEXNS/WOBK2ckftWdy873Z7Njfr23RRyBjb5pd9\nxLkorD9GuewXqlRJg50JhiYe6f1IhwEcA0VasC1YSiYPEx40CZbNlrxxaPqp\n7uZvXwy6Lo5Zhy2fxITeDnmvQvvFipqWVbY4VW77H0tG8uj5vo9+fJvJNMTv\nBNLN\r\n=Sj2+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGsIp24VLp+7Y1ED30IOFgTztti+yFYth6SHB0n15CmJAiEAypbYyBkDi3cUuRi+HtRZM37OTCQq4h1JFZ3fRrc8ll0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.597ca1b6.0_1611104361979_0.5129182909260168"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3c195efe.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.3c195efe.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.3c195efe.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"5832b828afcaa6412dff007228c15a665862a145","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Blm9DCIzvjIV7oVPZHYNmBJNdeXca4TvnWvUntEqWCY7efzXT95nicqA7/I+wDkBdA0PEGXavVPWOLhFU+WnJg==","shasum":"3afd370b905f2ed486058933e0684e08fa957200","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.3c195efe.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB47ZCRA9TVsSAnZWagAA+poP/14UHpVjJFWqGX5dSVSP\nODiBUEcYbFNLz4BvXJdFnjtTyyZiPxlB3sk4ClRPciB3b25hC5dgEE+gNknJ\nGqm8Hlz6OjFPKw9wpe1KLH7ly4EOylJ5jQCgiw+L/lWl0sQYEUIfxrCBgIkB\nli70Zd6Ey3COnpE3CdaThbNX70jPyBKq5F4iVhn3eA0nRpCcPMfv0VPLXNos\nkR4yWHGNNdsQC4koi8oasP7GwGKyIgB1p5K9qbONaAUbt8q87iA8r6zf77RA\nmyFTOuDUfcy7e2HX7Ox16C7uG+uUBA7fhAcJ1CzKQ6SPgWobAL3hqjIuw8V/\nGWnoO+883W/XiAG3nQhd9xpf5EcNTv4WES1OeXDSen95YhomnlrVbz7g5Mga\nmJqNoP4nt5v97D5ABppu6KdUpT2CBWdJzm39X1XRAZhh8XOdvsVtrqDMDbmi\n7LYOD9kgIhgmeismiMTAcLdPUoTyYBdQ8UtP0S856mL+Nx+Ho8uNo72Ra7LO\nOeriQptt0GNqeMgOWkWp7SS8ujygro5CBP+ec96M4btGTI9Ox49cR8iSPbG/\nL3u8HnwLQfLvuiqgpPPIy3KeZIbP7DsvJThR8bmeFGabnwAr/6BNAc1TYLfh\ns5xacqhhR7rNT1q8sff/xD/rQ78FGeyyPvhrfPiYPeNjqD4nkRVnCJJvVRK9\nSADL\r\n=DHZE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHqX3DAovyenw8j9bBvL/mbcktoySIZBYCa1QzwEyRFSAiBPB7cSgJ6hEHhevBnUldeCiSqB5hqUJZwnkIddhgC0xw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.3c195efe.0_1611108057467_0.7198101201584759"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f7b8755f.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.f7b8755f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.0c95c9f7b.0","@material/mwc-base":"0.21.0-canary.f7b8755f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.0c95c9f7b.0"},"publishConfig":{"access":"public"},"gitHead":"189595c9eb20e25a71796a5720374331d50a7f72","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Xhn8r2EDPwOu03ygJ366WVEJSPme6pF4Q5QxN4GXfXCVnENppG0IWuv19CIh9CYtfe6kRHGG3y5TaOjDwp4aTQ==","shasum":"184e3ca3a9e382aba367e7fe0ac1d4ca7123129e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.f7b8755f.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJR0CRA9TVsSAnZWagAAOLMQAIGKBH1Px6fXmycQVMhd\ntD7KZDqnzA+knLPXrRy3HrX2sgOpQW3ELFaUbN0quMF0w307rQZsMlKn6LXm\nD0hoBW7dQhdCgn0kQ11/AI9OfFmJAas2J3vENfGhxECll8ahyrQWfWM4E+Av\nSpLWSDitjAJ5RibFSz8tsjTON04D/Pcs7fNqrJe92jaYFTqW2KyAukxkIq8F\nIpF1YCxHI0Pi8Pose5eSVe6BIVAiLmXMc6ZowMIciTrbrBBan/u6fBmBe5zV\naPx3EhQ7vrfNdqMlsSRwIw2ITkZJrS2vIpy8xeXsJwQKVFVS1os/yn9RQTH0\nRl1ZSAb4dyIj28f48EHERyHwF0NE8c5oWAEqcbar4/CdtO+ds6bBhN+2FdO3\nKkw4MvvWkW6TinepKjA0ZxRfTdC7jkrjR/UFDRFcNSNzQrLJU/iCUeE9Usbt\nkdby0PNKvjAPibxDim/0kqsiTwzZJpshsFOoOCIxHu7j3YWUgFJhEtdfOIaK\nquEmz5UCupfJ2D6y/TeR5Pf/CsH8FM+orfdHMgteF/Xz9LqISGgwEAZtPMka\nKrzk1BEucZKKVdMLsynssxt4TOxbcobxQSXhulnH8kt6RuJka+NGVDH7/PIe\nABnzSzM43Z3y+CG6UC12JiKTkfpUvJrhQNga47T71XIKZueHT0PKU6JRfbTB\n2HuN\r\n=CDU+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICXCixCOd+2JWLk+i2Tt5/MnecPaUrzFnkjUF0DiSA1PAiBIgOunBr9teF6y70GQKazbmIv/EN78aWc1+gd75oONJA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.f7b8755f.0_1611175028577_0.43608934199290816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f60de7df.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.f60de7df.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.f60de7df.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"ada07a353340882b0d087ddf967d399be3009123","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ombEGn5Jk6GEDfy/tdPNdeGPbmXtmSCGnvmQIr/0RD/EN0djiVkoV2HuDBUCQD5ZtSEZDWWABhbf1gYH/TrlpQ==","shasum":"0a35e552606981876bfdad5687ef86fb0c9a8b78","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.f60de7df.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL5rCRA9TVsSAnZWagAA6vcP/2WvXI8q4PFaKx1pumGl\n3IIi8xaK3RvHppty5Sc7D0+7w3jmOHJDUuX3jbera8uXFiXSfGcUovQ/PHcD\n1W5kzxQhL8gcdxUThMAPwP5Ztptw+U8m+LFn5pu56M9rWCV9NHRdoQ/+k5mA\nuY8Hz7/NzX1hwF154L1xeq5J80jw3o7UF5HZUsdYj41b0V46E8zxSvmq09q1\niBG3bHn93lUHx5oyZjTouS+i942UhZgdY/43FSOOkFabQoTWZn12v+X5g3I/\nmbp/KnXeOtwJLtpYJ/+G/YTXikWUW/sSDAm3ewPkr8iOkggjIk/DMTdhSkYL\nls5A33PwisWxf/SGgZeYrrkNhaBmOIImAf6X7T8+/XHZ8FJ7a0PJSfsreJsQ\nME+VSm/Kgrww4RyKCb322KFO1PpiKu5T+HK1QBxNfFye/WmxiijOgLppkhwG\nQhoaEQI7ILjUObchXxNugayfw5/fhc4q2wIuHfb2Jcl8DOY6uRcKfBCxOgP5\n/0SYdl92K2TcTwckJzSQMVB+KOW4Q9gWizQbVnJDsM1RDFksvxpvS+XUS1YY\nJCeZoBUPHoiO7E+pb0GdppnRz/GyH19Ppu/RaBbAiNNOt8/Z72OswvHOPCjm\n2m7IGvyGqY078XxCCODyltbwBGu0qL9CpJxIgIOGoBx0jFEZ6nwtmtDox6Mm\ncBtI\r\n=DDNr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAgDdKbZQvnA4pXrdh6cz8uXjcjjUlC7UTpHunqtcfSvAiALrX7yrTa+AQKwygUR+TAHQTbKsKSBuhncd/nG6DaSOg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.f60de7df.0_1611185770494_0.09933591893679017"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.664a2927.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.664a2927.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.664a2927.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-RBOOc7woWGYRJ3rjGtYZv8SayvimDHY/RxwV76mnjDbIRE3XtgeaRmmPUy3P9wOXynEpnpLmuwckWVjJSoYjSQ==","shasum":"1bd997b268d62a2d252de9c88fda1b4ecee8ae4a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.664a2927.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdNtCRA9TVsSAnZWagAAGd4QAKT7v4Cy7xpvFfiUWjs9\nPHpTQSTD6PUxFNJ9H7broZjDhQgl0XiaJ+SivEmU2kItDhXRv8o6wXnPOaaQ\nd9U5vcQe9KY1prvdRgJ1Wpv3K3SX1X3321BpffMymc510IW+uUUwy55zS9Pp\nwP7Hv/tIyPAqK4KF9IiF1C0+lH8BPSs+9pSZe1J6wkfCZOQH5nxLBJvCw0T7\n+mDZc7QZf47w2v5MWZN/aFU5QDiSFbBXs5quy/soXnMFZbhv3OMOz5jXlDiM\nIpqDncDHQZZQ4SgRHeiLf+Xgbmm0Qj38XFGYQVZ3vKKlK4aG/CDQ0RY+8aRG\ngmUdvrGENrq/nLGJHJvuXnZslHb8QBaReNwRs7sLULK3knCO7HWB8NY3crQM\nc/Pnl8ehdKZIvvx/hxS0hIub2dvukPlcNRzfHv2+8AT3PNbhbbXNNsmeHElk\nfl7xRELVZ82BlQQqo0dVvkC3ZFlv4auJBH4REfVtPH8HhJ21Y3dvYuS21wUx\nZHm/eHtCaE0f6CFdgd3+eMDbuVNMvJfaZ/xqdeIzn3XDCCwiY7CK//As7usq\nzAyNkait3zOxAEdzluQfpNlAVAY/z/eiWzJ1sge7SzJFPzVlVTFNy8uJVLwc\nijMF+TusnBvhKazxp97zqgiNgmeuaWXSUc4C3dN6X1luFeuECprJ5YrsdU6i\nlrG5\r\n=EyLo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF7R9WeeN61Ng/sZV5qimYGHT2zk7Ailgd56RsSd87R+AiANqPu7Hlsts/rwWJwHJi1fXLnbMEHe8jtKFaM3/mfaKA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.664a2927.0_1611256684580_0.7974227919744779"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d312e5.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.a6d312e5.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.fd61b0476.0","@material/mwc-base":"0.21.0-canary.a6d312e5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.fd61b0476.0"},"publishConfig":{"access":"public"},"gitHead":"c9a270f0f64518469d960de40537a07c4cbaf812","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-hV3bVJFejASpKNHQAkKMZTVcV5qKQ0UGtep2kudY0u1iOM6uk0QeI+ysCZi9wsNTZM2mGgb1rGGFYO56cz3AVA==","shasum":"0fc3598da1c3f411a19183ba7cc881a3fad335f1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.a6d312e5.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfZXCRA9TVsSAnZWagAAP+8P/3GaTRV5VrnLxQkEzOIa\nnyKEWcm/AEeR8gWxFtidtmuVOMVqoD6YSxlnaRyeJqqVMdtVrVSw6vukLi64\nnE2aOjy0jVNnGyk9Gu2tmGUmCwrxIFRdnvSzgBBRvU5SAjIsyR/4JRraGAbW\n9mQ0jN+bOC7GiAqP1XmdJkaDLd4CWyJfHilCKUQO81iQVZHoKxX5p1MAytDB\nwHrtFrASDWL+DdlVOZzjkubzNblMPgEQWCsU75n3WfHpsn//qiiiGvhLRFS9\nINgkcaCDfx5TvYQ4v5Htb3SB+5BOZvn2PRBI23g6YDIaAyB89j1O1B2Vd32A\nXvYcep8wH9QEyPclC7ock5qDYCQ2BOw5cEOMcpZUsAhsG2S6ce6eL8YpxTqK\npn5BfumEmOS/RfMCnS2lBF5BJvVm6q5Uyi+w1wQWqD7VeswbfV7Ely8nWeXj\nTLHGHd0tOH992S2Z/WEuh8RtxYXewwtCyfJjWUyBQEB6yKhquA/VvSxc70IL\n/B0wg9ovN2HYKLq6bF62yNR/0yf7rZqaaFqEKLO2aQu+GbVv/CcwwNvNgJr4\nlzNQQPh0LijVyFS9smG2uenOxtIPKppQePzO7KD8dJ9JMuQg1JbRuWuVWGX+\nLebpWwVFiK3Ww0laYstrxgZwkQhhgbyA9XAX9cjXfqtcNrD6+lGByMoP7MpJ\nUN8j\r\n=Y1uV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYYGLe+yJjsLE7UVmM62Cm+1NBEYPFL/wU8JtL/q2AnQIhAKmzXjHswemYPuAg95KGGGjzggyMKHAu8EU1YdI848eI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.a6d312e5.0_1611265623213_0.824231244061121"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.027365eb.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.027365eb.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.027365eb.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"85e9fc6866aaf5bc83721e8c823275ba9232a536","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-r/pG9VKZzcxcvq6Y/eyCiN5+kS/rZWOACUSukXIEk1Wmew0ESBAUxxzEIwVZJkgpKg8OOu76hqotlknRGbj+Qw==","shasum":"80506de78b33e4a3754b18c32ffcdfcecf5df134","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.027365eb.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz5zCRA9TVsSAnZWagAAoJQQAJC8SZcU+4xtI1aAz50Q\ny1inRwHD9AMGPuxhTAQtYWDWRUqdqSSRTjviefOVywnD7K/SB1KEyfIvkJGk\nstpDOGa9WCHt3fHk1tZXRhcQGHT9VsLDbjDP/Q++k/q2zO1qKDrKS4yKD080\nGSbY/nRFGnjYHzD3jgWUFyGC+60viiEW3nAnvHCfXej5rwvls47u6okxhRKZ\nRZnN8/AiHelBPHBa0zS0r89Kx+Og2a2WyKR4wBbFHEWBIzCAZzyCOo9k2++X\nBT9LkgI1yi4vy/Cxo30JYhy0dts4NcjJuNwfsOXLwcroKwEp7MXo9ZCzoj2x\naYD6ejBrPCnPKHYup9I9YSiJXd4un3TAitKDc3nrXwdreBCKIecldMiBCIFC\nOCbcp6U+Lu1Q755M0aZwLwHPZu0RJacepA59siDNbrwkfet/zdXWFK5ccgkn\nTePuKvtipscrrz7ntWZ5oJA1Cuee9hDsn3UQP1oyQPpVz9+ge1IQ5OD1hyh/\nyC193FUDGnU6ohqhCpTO1ApVsVTG27phAzI2UHsUUNORYcLiMGJ0ZeE8NrR2\n6gS9CLCC6oOwQKAPaCV7Q9+feTOUe0uXlXKM/EJQnbcrIeo3m/IxDbFZfltu\nlbYvxdlnOy8HLATH7ZAOCvEhdYDsH8onSJdtb2WXXcnZNPR2VBOx1kgBa/D2\nFYus\r\n=wJBQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGehYClYk1xmjeSLHrOZWpZbPJJkpbIBFW7FGuvg0Vr8AiAU03DDMAQU/iXaVHaNClyV9xw802e4oB1CjZ+6EePEVQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.027365eb.0_1611349619375_0.4368970319258574"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7e72b66d.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.7e72b66d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.7e72b66d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"000cf6108aa08030d7569d4ad30c798e7ebe9da3","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UehddajZj/mBzpW/uwmQPVfoSpuW57NLlVUWww5/Ax6oF7CDxcDu9VedtpfVESGFV7EHkCAkCLSvyioQZF1OUA==","shasum":"28c997a3327abadfecddb54251182631a31a5ab0","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.7e72b66d.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC18HCRA9TVsSAnZWagAAsekP/ipU6Z9RuP1bmPmMqcOY\nAw6JWrVnXme2w7SdZYBKKvIYtBTs7+GiZln8qNitKhGv/WFdnnXxevZalLcK\nS9QOZK5txLVzUwfImyywK9w1jHNgF7q2pxV8nDv7GT5yQcThBjW4c0Lk6z6w\n/0LRsmWV8e2nLjA1fwAI0t5gdOAHaliOZIZihjP+MidfjLfVJoEdePsx3Lcq\nwXcJQ/cTLx8Ls/5q8cUS4SfiT5mMLvtcceIcMNgsnSp3xpGNG+9bLFMDTGmh\nt9tnWumJgBQZ2YLkqshF7DUGL04cTGZul/T96kRtg3v66e2bdIKfPzqfrG2L\nolP7gY99AFQKKXCA5Z+NNrUl4rFc3LrdlBDMqOE/2PVR6QoFvzVZ4DRQhwPX\nQUGKTV1DikdBrFiAccjGI4WmFOuR8FLqxk9iKK25A9FSUyf2FUr+YdWLXuyf\n59bhJT07ydl321XvZeVS0bzs+K/wa/K/n4ZfMRWe1aHn+H+q1vW1yeCDpxkT\nMCSc0n1Y3fHXzHZXwrGjPkqQ9QuE30gTo23P3noY4A4mQoN619JDcPnVRORh\nocSnX5K8h4ZNeuvSvCRW/dOKYSWG+9ngC4nN+5atqUaHNMUfTL2xLp9yoy/V\nB6Rdkq+u5glmLppLyzxmX2hLVOlEnMEZafApYLaAMZczd82I96Yih0b3vhh+\nq/iW\r\n=AfzC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAsFYwiaO1psSyho4B5F0q+uBMTi+v4FLv7DF2UnE0TWAiEA67orMW6Peiy6sE/7RGbzTx2JiBMwsKQEIlvxtYzEap8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.7e72b66d.0_1611357958882_0.9883739812194452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d6a1e7.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.a6d6a1e7.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.a6d6a1e7.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"24a3d6e567ad7ea6c29b40c2088121baec3a5fc3","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-1NuLtaO76Bn3xDQ3N7yQxTKFDiGjvQ9Xs60GjzMF0S3Uob4m+lRGqrAW5MNuXeOldbeKF94wnlb890pWFABjNw==","shasum":"140ef3943cd4983bc9134274e4f1adbbc5e28f8c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2CDCRA9TVsSAnZWagAA4FIQAI48C2f43Sn+buulFz2X\nScvK8tf2BNWOiKwVn+nwuExw6Eu2ycxe2l4b8Mh+5BEbxK2yFCerhFLAtFfA\nnadnE3zkdIoGKqkAzYpWGJw3R8spoG95+ZPzf0oUWkrqkIVQ9dDc4i+xH6Ja\n7p7apuRAJrH2nglWxHpjyx3KLmMq5gSmWNMvZF1TTBdIGvSwpc4V9IhrVtnl\nZCIgq+6YT9DTPUGzh0kLwUZtWMFFGbSroYJdP3Hr1jTSugN4sG3HDe0RqjvL\n9geNK3l7QqdWFRXVJyKqj033IgM9P4GLONnUprO051Ha3XAHPr5gRWaC6I0H\nXapgFn29wlMFtabPk//nw5eUfd1t8NevvhM8sQRo6SA8KoMxHP7TNCUHVE6X\nInu3RFdC1nPl0wbZgROmGi3VvjEzJZvzS9kwMnzYAgccpzvDL6qkLEJ9Idgv\nLSWisr5c3MPIH4MceMZ8OUJsbPKKQTe6xrJZ0zwRgISSJVFfkO6sKCi8HFrf\nNsq085EV4PIPnGBF+2FEyRrWIJ7W+MEVyS6hJyzf7bcZQ5QiHp7kJIchwyx7\nVxbf9EVs8Bmr3nC4ghZ0Y3xY92MjRhn4HoD68dXpPnQnl8ZP0ecsFr6ud6jf\nRRPZJyMbqqDjTa8CXh2NQvWdjCmBDqIY45P/bKwOJ4NgBw+hUnmUR6cCAdts\nH/eL\r\n=WdBb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOvFmZeF3QGdSngOmBP8sr6cwTckbQIrChEJ5jmEvYzwIhAICWg+VJ2nVITdYIHeT18/KsZawG1eUcujrtLbNf/n7w"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.a6d6a1e7.0_1611358339351_0.9223048271698877"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b95fe100.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.b95fe100.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.b95fe100.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"229d3b172620cbdd5deae4cb60852f0ad2d4671e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jk03GBt69Ydd5K39wWxB7pTxxWHA27bsIpfGSU7ayJ2vyZSKXelw6cRCnEAhY+Sw4u0e4NKQHBbo8azuTEPIHA==","shasum":"4cfe94acebfd64a315fbe21b05f70c68fcddf289","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.b95fe100.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2T9CRA9TVsSAnZWagAATpEP/2h3wIlD7IS/iS1mlxJW\ngmBlB9MbbVFJEWL3SmSSQLN5gbF7SZXhq6exHqVUlm8zRM6HqRuRqMhhzkrJ\nNidM887azy7YXu6Ptsmas4lopPjsECx70AkXYI3f2HK6UILj+4+6O9nkL38s\nkp8SxeVhKYu+CnV0sUN7m3RWm1X7qUbnJwEcbu67PCkV1Hk9dwHvLlk92lPS\nYI3W/zlgEGtIKvK/DZfC/neGODaWkb4pHbp+oiHosaK3fQ/UFOApjnD1E3Ly\nXJ76Ux2gnxszfnVenGiIA1yK30qvhQDiwzxgRUdtIRJukZbkv9ICw6RkNWTy\nrRGMMjJRzXYUonRnCMNvio0FlxA9W62qZTTotsMcD8Nx9Z6B7Os/bgi9cLYp\nUX0byfecYXuRsZcDnazzg2OICD509OZycuq32fx2cdW0H4yA7EbSct/0HFBm\nOGGYKZvq8FiYi1AZOKHc0tbP+e+fyl/+UURFm7uMN4PJoo0WemCS2kL4bAg1\nXcKl2elenkhK6qAgK3eBIY8QS/VmxoDVZOhIjUSrDnhA7G+ykYH2iVWz6ah7\nYxIJxJQoFroQXVE8i78czzHGDcI38DJNy1k3cOvHNWHXcRAuMfoLm0or9Uy8\n5cniD3dLSltBThkMLiIHQL0LH+DqAuPHvTDwOxATRH7JBZlMlhLweA8b93lw\nu2p5\r\n=SkwR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDMFFMA6ovy/FmB1O569tCplNSGB5ErbHqvd9jzV0u5/AiEAwO4EnpxgMiXJV5CuhHRxIce5qsTDmaNcwbj2u4PNWXg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.b95fe100.0_1611359485211_0.898198190381047"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c8797192.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.c8797192.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.c8797192.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-WQ/iOtFhFeeSCeYCxyIcNONx/bX73uTQjhgTmqkwDAMnoGpuxgLQzph/P6cMRCQSi1SFSImuPFqK3g5CEdjvqQ==","shasum":"9450fa03aa68035a830b782180455c1988b44f25","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.c8797192.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2iYCRA9TVsSAnZWagAACykP/jeJQVl3irW9J8hpb4TR\n1IaVTR6Uei2457tPvOkjmqsW+qNpyk81tE5HX8ebB69TU2JeqhBu32dIzAbo\nO/IoPFhpjog0kyM6lu2E201ryxzvSlIDUlwi0aff1v0V/mbmszZem1nWGvsO\nAsz/ZHAO5eUEIktuDIT6wa8qAxtgEPVPY8nM5ubvPdlrIYEXktnGIPzVu9EV\noxYF+Knv2m1ZP4QVmb+zKb367lrU7gygcpUVAz4TlYTvuYscUQ/1yksYOQ0x\nA8ECpqKjteX9peItAat1czlFrWWzU1Hu79IyfCwJizsp3G7IFuG54tMSQTuj\nPeiO1xwIYZhkOU9I9SDBOcIeuCt4vZoY1gD6/QoY5bMmdFKpb3PyboGTRi8q\nsjSRjhDR8uGrX6QMLW8v6MUOx5Zq8L7nK4/uQGeksM0QbDdtNaIDhKfrCcdU\nuFw3XUCYBkMu1LIUy3IuNTsTNM9TPryEze7EJtC/27WShzVu+DEbsrR3Uh0h\n+mErEhUYR+b0L6Wv6EjLtPNdyF17bOAHhuqqNjuQ9ytrGdAfrJW+mcZWRWEt\n2wO6INOa8Pl0HDJgG1aJ+Ud5SrdJqUhVfYwXRfgGxxUpexCoXRlr7dxlGXxr\nfJN8d2GhRMSP+TFUXYDvJbnCnTvqzlVze/glu9Uo+V6BTiyGA0UxYz00JNaO\nyVIJ\r\n=etv5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzGHFVrWTjZROgnzrECSC915y3hknelgLoE2uJVoRdzgIgXP9YEYHeKo0ziU/kny09Gmz7L8iI7Uu59/zhf1gbf3Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.c8797192.0_1611360407924_0.8741881252801589"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.946f5563.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.946f5563.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.946f5563.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-WvJR2/hyhV3DED0+YgZNF5RVgWDI/AArekgxQ0FRd2P5r4GWfOP5f9FvmU8KXi6vJH8xV+DkIAjb/VwdiHPcdw==","shasum":"324251ee151173d663015b677562356dc7ae40ef","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.946f5563.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3EQCRA9TVsSAnZWagAAFBQP/0LM+Ow9SNn5aviSwcrD\nmlxiv3msZTHYE9yevR4Lrs/9R5lLBFsHA8KJtjzeh0BsfGpxqQsyVjI4Mhf9\neUprTneLFA4Uol1BdXEpYReKWiwibxjkTmkla/Q91TqKvyKMJwVeQrKmZ8NQ\nAtGAvrDNgKuK3Dz7m7pJrrlWwc6N7n9eqNPyQAwXCHXIeLcUa9P9FzobWjRX\nWQVwzZyr8UvXUUX/PlkjF/iPY6FoA2vPR6Ut6FqIxuEJaq2wWRtwC2fF5Sc5\nJSHlwNP5ThZAVflOoYIBxMU3U6KwOYNtEotvO4z+0n2yyzIhwD5QJgFeo/Zv\nRFCAh86ljQqNkqdQc9r/6Ui52NDns82OhwicwCOcbYtfAFIt/pd/Uu27kweU\nzpBN3da0l1NBZ8TQOMS9+74jrWNNCALK1ZdhF6R2WMWwLGae82+f2dezrKCv\nRttxnmzV3Tgw9GXqZorLzO/XLyIxN5QnoKyUPfHrAdhnGcRwLtWlJU8FciY1\n40ENKGY6f7EuGonuhjEJcbdU6aZoxPrDEDHqvziDiOYhBqh+n2LXTZuDIaR7\nGzcWjLdBmDsMaRYPcY1jpMHYQZI/YgRqU4FB8yMZRUrnYZprTqPmdCQ6n90O\nwbomm32HEvliqP5VWntuodJNeSXvuXXAGlqwtGlptsWPm4eu0pVL/otkN+I+\n6yyo\r\n=Rm0A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGVhrka7XP4LFdnfDmYIpNBPuqqw6nYuiv5GHVpO3dSwIgAizVyP4EShGe4UwuKBsTxtuiNSrlbV/l2ehc8OlXCfk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.946f5563.0_1611362575805_0.7618157177035265"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.43664f0e.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.43664f0e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.43664f0e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-iuHMGwu7MyTAlOPWpiXfa0qNAo6d1QELLc4NMD1KSJqVnaA0+zfm+TjfQe8AOErWeB6uqaMhTDINWfz4GbGGZg==","shasum":"063235d7b75a60945c281b6ca7d462d1304a40a8","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.43664f0e.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0ijCRA9TVsSAnZWagAAYGwP/1T40iq2rOU9B6Vfuo0L\nX6LIucb3YarGyIgKwvqrR8BgLqbI/eMLBQu9l+scu7NeaasYcjypLRK5/ew1\n9srjHRfysIZ5PHvifTazcYtTF9x69F7wIf9W/JmVhPfEqJ0Q7Dciv5OEzDb7\nYFERIGrvyvMYxmxzH2aN/Dk9uAP1pjQ/zEhrw0xLxJjV1nFd7TsfbDzi0x/g\n5XjvnMPmYfFlnFhbZv/12x7D7uEoqoI0E3k1aSwJWVHnkddLcIwdXsXkBr4c\n0DVQkqXLseWlddIQtUQZQ0P0znPVzkw35kvMQT7UE5qk0Oqg5t8FlC/hi8Ib\nM/4DREwNqEf462Gb/EEkPVb38rE+Nn/U7spBJovXoh7EzaUOhOow7tfd+cdb\nNHVoINCCtRLNvHcjXsqlIGC7XWuhRqwdHmefa93pY7JAc+C4DW3JVrMLaZYl\n5sHX27+kPccn47pn8Xf6RVWwYs5im68g/zg2kQBLK0K3xYg9wk6qLQlSSIm3\nHgKUuWdbKr53k+Sqa6LqfU4KwTWtSQ+X4gENwi1yLLeW+3W2mzlWJVJh+fxx\nPXB2x11QEHExoSTTUMo9QPQsug7fPAMMFiDDun9x9LFKWXc2FslSDf9o51oK\nT+/v4HOxN/oJK6K9w8IrKKIoU2pKm+ie+v1qA6wrzU8lGgVEl9OUgvUDtrHn\nnjKQ\r\n=Mgt3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGwqlTeapQgj+NAv6IrQZOcsuT/aMc9pAM6ylDoMzuGAIgHIw1nr8vlmD/nLfVcGYZLsRrGR6GjpBXTygJW+a56Q4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.43664f0e.0_1611614371417_0.21271875037693988"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e769e3c.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.2e769e3c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.2e769e3c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"e3a3fae1109be58444840f6099c0f87c3966367d","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Zja6rvWef3w5W10MP6lZb0hw82Dxv145NS3PgP+7DAVXp/Fohq0b0bikjn+Y4uswu9e371Hy9dcfzneSAUt75A==","shasum":"e83d2f687732ab1b13232981271386417e83788c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.2e769e3c.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD1zaCRA9TVsSAnZWagAAg38P+gNEhbojQFCMCi3exMV2\n4jPLu1+4hYHkrePrd/upKgg7/rB+PGEUo9yTR8rCeWjigHQ88ucnge05HkgO\nUtni/0QWbZTN9dF72D1Qj732u81M4WrbmeS5ax/J2dPrSCVtdYm/2U1dLXyR\neKjHeKbn305tcy9tx2aOXISeZngZuLJHvRdsHPy40AHCj3XqDmQeBRTKjJlQ\n8vjLsCtj9jkRzzpAylvlG8pdPz0xiGCyxTf2x/RtQqfnGJujSUGNwxpWrFm4\nzcQr/OIiFKK1POz0YF5v9P6dBX2fOFACfIutL+EJiBctFPw+ELM8oRWNkpsB\nEc6mOHxuqRJKHgN/c9TO5mrRZezZQqrUtTzrBYXn37kfJp11LAb55Tq/8h0e\nI1Wn6MM4F2Y1qsmlOmSsNwQf9zZl6Cb9hVcJnl84d8MKQogLIwS1gr8VSRb8\nLcPYoQWEPX0GbdnJzH4ZiUC/nv/vIfsLi/+bF6IVZzQcz/wXdjrT2ZX/0pM+\nuZyH4Y6rbqXbRmHwZAdlcjFAl2a1DMBLSF7B0qL5DJQhlekCla95iZZhIWdB\njNcYSFfabUhQkU7mqLoossfPeS5lWsa8NEdCylW0hQup/NBzZEheftoZb4yZ\nJjdBIOL4Uf4VceJVS75XYPWc/OvvaqcLoBTH2QJRSmrmsywJQEaKJOZ2b1S5\nTyrT\r\n=KDTE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHCHyR3bSMRbRKg4ltKfjE715abqAs+yoUJJAv68AUyOAiEA0rEkTjYUleOQHNbTVyXjxg3jUo8mLhMwwyYymjsHa6A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.2e769e3c.0_1611619546572_0.5445264611523495"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.14e01610.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.14e01610.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.14e01610.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"0794659aea627aa04b2ec37e3f0e8cd9d976ae8a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-1wN5JJ60+Xlw5ljEfZCt+NyoV7YVcpxj52skjkTe6D07wMWB3AoRelSW2rn7ms8mIJWl8NPloiRUnLNfqaXozw==","shasum":"4fa808780ccbbbdf270579253fe2ceec6d1b4190","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.14e01610.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcQhCRA9TVsSAnZWagAAMJsP/jNdhfMGk6/dolZo95V7\n3IybCJptX5nwOhrKukEz+bzQ7us4lBkC/W+uA5qklb4AgNGiw3mzzYP4Zojy\nC3g7KSEJxY/rFCRWZR3vPtQ9ZGmkxT0HaSA+kg8I8JgJrukopr9ByPK5Z6w9\nkbch9MSiKYD+6b/WXQynaQKkeQ6a+9Ted6mUJX8HvLwHLoNb2ekXomt4bP16\nv+6zakj7iroUZ1fExdudE3e5fpxwg0dgs3RSHp/LiAFk9V0fpzvi4+7x/dH7\nOLpaXBsODW+nG80fTQAuo1oXRilFqRM2na6mjYMxoAWpAEx6O5aI/rKCxloT\nc4TSkSz1cu6rZN1CY7VaA7wF7B7r14CxjG0+22r8XkK041r67gkVD8QLsjCD\n2oTOMrS5STTtNVUNOs+h7GYWW3CayBegTPZEch8THVOcaQssan19+GRWnaRn\nemry5DLT4uWyEyUgc+z8UGtCG6COLe83oKsAWY2jpJgWTjXrs971kQmhyuwM\nhY+4m7Xm4RkPfgT4IiPx7r5Bz34EVcw/RmTAJ/bGxl774P9kQfxuFAfustZ3\nyVy+N8CNlEL8HkDbTNHyrSnex3ux4kxqP8Zfr9zfl/DxQEkiQ2rOLP4PJlH3\nEBoZXcVfP48BUCA6hR6n8OYyc0dZPJk67FP2qLt61qtablRnnfDhxFL14OIh\n9vkW\r\n=T3Jo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClfc11WFzPsJynrO5tEovkhf+ifx39BwRQUMTyRe4mHwIgCPVDJsaTkbGJJsDjFM7xbt9Y4o5y1rixy0vHsXutZ4k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.14e01610.0_1611777056771_0.35185334978350946"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5de00c1b.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.5de00c1b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5de00c1b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"65f40b8130ec795f2a349c0699be5b3038a9c32e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ZGhG0/KXo+3YZ5hPZnVlTKjTZgsEv3s0zxCtXtX1hajaOzYuUYHS94m8/zJL1njrVNxo06ahI2RzSGJGobhTkQ==","shasum":"be03ad39e5ad972a69d0f7049ef1a9c78db1a20b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.5de00c1b.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcomCRA9TVsSAnZWagAAF0IP/1zokzFM3pcTpEhs9Z5q\nLCM6k+UIsTrFSEIErzhYvjBM21GR3sks5Tx5S6Oy4iNAvwy+qIzdAnagho6S\nSx39le6SMhHRsQevnoSKXJB3jUh7JTlVMEe6pUYi7JhMeZFcpsQ+aatWwpG2\nf8sRmwH56007587u9JkqRzg/BqQUH9lXfVnaFYGhybuEaVJfaQsRX5/xRHDy\nODOLc1n3TUBcNbvq6sf6IEER9hSnSyJ/ohp/L3kcaKRTWY/AzoALPDpT0ekY\nP05OEfgKMCOqm2lIT7JN+hyXGtzlTj4K5O/UtPcv6WAob+nHenqT3BH7y6Yi\n7/IXTBWqkdNuCMC+iXwA1xwT1nhZcsbZVx7zQ3pyDpYOxyQ1fjAiGJuGVW5t\nGBOWq6pMy/thd90bjd9yZgL5C+epVIKNGfoPgKPMaKwTcku/K/jVnvAPzKHd\nwsQqabZXEAGIuMaqu/dohTpJy80V7fqoHc17GuhYC7E/QR1Yn0+N0kAoVvej\nUwhowmX2gjbxIzADJ416MLtrCDpqETagihvptSrSbr2oxhWn+d0kocNPdrjq\n5Edfo5dGj98oMgHUamXBBp1h6izC19tr9N/HucwMBy/kFINXrluRsAg9UqKi\nvGvjcqqO8Hu+kgHsSelc13vFdYCAwA+oELQJGhxENZ585fZrLAZTP6wS5j+Q\nmbeC\r\n=WAU0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACDSS4JPKDz9Ca4LDbq4GwV7En6pVf23lGHRty7I2FkAiAwZNFEWDiBCdRKdslTC1aY3aOYwLBZzeTJRrcaAD9tiw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.5de00c1b.0_1611778598334_0.24829539145103685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5a328336.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.5a328336.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5a328336.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"d5547f58c69336881e54d7463a7f7d92a04b53c7","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-lZaJY9Q1XygcN5e/whZUNyYJKrDG0ypaJtqbwkpR1XLrAF5WZscUWW4EF4VRr38Tyg7MLyr9BJt4IIe2BuLvZQ==","shasum":"cc481d2393bb42fc0d44cc0dc4bc11bd90d1ca8b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.5a328336.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExZhCRA9TVsSAnZWagAAV4YQAJ2bQNZZadULVULmcNfF\nZQxnQMC3LlXstKEch3ZHjHBF+uo7aW/lpMbq2zzZB5/ESFAqcZJBD31ug+Vj\nshe0e+3H1siCZ9+zfZ+L6z8YTQcjJgxTrZpxHmgyUvodor+2fVMghwSE9fYK\nA89VDzm3YIp00hlD9F7zNiqDsE+Kwmwsz+J/KiNOjQs4YRW7cuhaHociVYP6\n8rM680TVMDgVacMb7CG4ZvuDQwIxzH1XofeJDrdqyBF9U6TXUZwCUoyvcaqE\ngM7qC9x7B87hUqGBY5dIy9T2/gIVxkgyI2HF4huVUMFMHRGLyvEK8wDjXt5U\nKrFjg4fvMZKjFA1jLfWDSgclCnvIrf/DqSw08dzAqMZuv9hXyGZr48kRszqq\npb+iD7lXva86D3HfCvqrrdt1q9I7JNMVwg/OJmsaH5l/upt0hERVhMpBcAkZ\nK5qNr32ffNiv/VpGoZLf2fcK//gkIsQkxKV5UyEpbK92L09kztxTHW6NNFnV\n8vUUr4Amj82fvlspdOz7TxGyQ0CqVyGvvGx+aeG52UR11Oej6mdmQH7/etGs\n+64SlAHSsMxEREQi4xhIkg0DtVrfy6QCqw745XsXphVeHauhP+a+9avYxDee\nCxRhLwzgrRe+eN9uDHXqn00ipC+mAbWlupFM5knjKgmdHm0nzag1m/16OIcq\nJdwF\r\n=8Ejc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFcfvbN7S3DQQRw+vYr26eNKYZDGwAvTPmGCFikHmi7QAiEAhFDAHL7Q/7A7SaEn9IA3MIjF4yc8rGpNagKT9JqiRBc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.5a328336.0_1611863648671_0.1926157967866049"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.533b1251.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.533b1251.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.533b1251.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"b88cf0e2eded50fb9a839a426059ff1f8242a490","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Vdctaht2kTuNSvFjYKztJhomSUOrEa36yp9xx5tExnDhgBbmRxF5I8nuizDPlE68ZvK+DwclmO4eNjtq91FiVA==","shasum":"7fb304565d61908fa3eae4dcef57a9d835084e2e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.533b1251.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCWKCRA9TVsSAnZWagAAj3oP/1lnzgR5JfevJrNdFNIj\nBh3n1OiN4h+wUPb4ziL8rW0BpK8+1z7jx9FdiZ3Vo9zANrElIJaLxFjBtHFz\n9EYjEMI4VkvPGmKXxOlKk7/OFW5bJHeijcWkguFvqtqX0k7bL4e1DjtUkJBd\nOHZBUcWySPK7BMVxUWRdlr1o0hQf3+Q4QioNPENMy/72kleGCHS3otsGZYIe\nvePzl0TLeKG2QDE3izV0H3N5U+LD/WKND4EyKc8Jy2mCoQSdwy82/XxvLDcJ\n0nW26eh+93iowi+BHdQ3XkOe9Wt2IlICf3RGoAMyP1ctLLfZ3EEqHTt7kT2h\neIL82XBgIVt+z3sXyraGuFs+odZ44FgQ+Kv5myMXsRe6BNcZd44WIIEqzL6Q\n7Qn7SJpFz6eYwW24//D9EhTgV6Zykdw3KB8AhWhIuzIB6iPifHJOYcoGd4WO\nJvplhBvTGvgoUtOi6hMmbkUMMICPV9kxaIiHV0vgg9TmJWWJSjUSSewLZZhx\nayqKRxOGm5VFLGt6dCj3Ah6aF7Lp1ZMn4aoyrGfilRuLPPkGQfTih1rGPaWY\nUc5zWFQjHpDMbt50t6EcOMtEkMY0coP2sI9vPeS3C36P02tPZ6EamZS7U/+M\nbYhfVdb6p3XlZukHc/E2K9Xqsx+jT+WJ8aOVl2U+es0x4JjpoWHcEP9Hc2KC\n/xUi\r\n=Bogm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4qQMZEvHUv/BKYctN+xiX21P4hbPwCC49Lq/HzN7XMwIhAO+qY5hfBAjPvK8zCt8dRQE4kBC/794tz4dEuA7Fzk7G"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.533b1251.0_1611933066131_0.4300229664810875"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ab5c0a10.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.ab5c0a10.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.ab5c0a10.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"2809af58a44d479ea0c8000c34c546f525921004","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-PuwwVFHi3Bt+ubgN4uDzJW1ICruHQ+TblHR7ZU0ag4Oj2CyD/jsB0/I1qjSJ5M/TQhxhiVh6AIpDjc8S9mfKTA==","shasum":"6a47e000d716915cecb2da68a7a499f679da9994","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.ab5c0a10.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbM4CRA9TVsSAnZWagAAthkP/0sJSdi6cERtfjq2LrRG\nJQeWIx58Rt3xut4esbSZY1fufuCXG87NFwTaaZzKRutUxwkUCcQJ6ecdx4qt\nCVmG15Ar0E+1rX8qr36CTK3egDZAm4ZB8Yho4Vy2woSMo9rDkYjx6cl6bcXy\nMWC2r6932330+kjvztq7jvgrc91wsjgff7lCjP6mp1/nBl/vrgnGASf2uuwD\nArr7xVBAV8dq4s0oYoZ2j5GfGTdWHIICMTMBCxXAWgFRRmaEO88AUqNGvVr3\nW6dd/hcJTVwLmg8UeOUV5PjAPnQ/j2hFy322To82H34lTXmA57V75AQNdR5A\nUYFL5xCtiPZft7RYgMDi3t2oyJLKOgtVkDzT5OPvjyjd0CMo7CiAz2ABGbOa\nYmGx59FTDdczytwqv7pxQKTC/gIslM1RHijSD94V7yGXwZZNq9Sf9fgtJddG\nijcn/54vuKAAbKfeIGcaAU8UC56fIMm1jYypTa6UOHKv10H6Dx4Uclma6Y+J\n/Ojm4Y8IHlAzQBvIx/gz7NZdnOjIZ2ZSxmRADKNnLFA2ssSwH7wTXcoHXnCB\nBlH8oCFyw4oVS2YwmOD0Y7UVDwt9+SwgRMQBn95pLUKZ1c0+IeMHgyc+RECO\npFfwLumbBmqom3u//xYZtyiMBAP9ZC5PdhfHHgTp/9RaI3d0v1iKf7M+vlfy\neUlA\r\n=74xd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDU23uvfSPHvbNFgm55Tn+0xHRUUwEQiyJ9vgvqynFThQIgQ8aXfQORCQ2rrHpDX/AYM4upQ6tAkFSWam0/Ikg3kho="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.ab5c0a10.0_1612297016060_0.11808710628877872"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7a40b27.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.b7a40b27.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.b7a40b27.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-jOHMet715tOjBcJllFO5cYqQMm0NwRB1oDLpG1nt5O5/6V1GF+EviTao1+y42UuWb99lb4TlcnictNrezBWBPA==","shasum":"820f5f377da43512441c39269f018714b7d153c2","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.b7a40b27.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGrsrCRA9TVsSAnZWagAAeF4P/Rr/mZvyASGQPj/XRJDl\nB6fL/1iqp64plKnTabQN2KsrbaIDFfz9ligz4SgFiHOXvxtqdhM2Hn5UattD\nWG/6klQUg9gVrolzWFSFsGoMS/9EPUknH1Ztvffpl6UcbE6X6g0y5+sXuTY1\ndzhN+EShHwdGGV7jOpocHrEk8+eMZqExlYBm+3L4dyLZElptpodYxCOEojK/\nhsHT45r4WzJZDZIAXdbxtr4N6oLDcmrJMuRU+ydOLHFEpOpN67QNIQgtO5i/\nBjBF2228qPGSgVTuNfGKrzdrdk+XW6sV8TOMLzqK1XlzePp3ID8/uu3FK4ZD\neXEsJp5X4s2OXOrn2KO30Ny/Cq7gVFCqia7oJp5Q/f4kAne2iXFfgBmAPXNX\ndYrIKRL61syf2cziVdh9+2yNwty1/NSl/uc3+ORUS963raG92X502NDV5VpN\nEGjS2IqBaEpmIjX4EnTm8mmf5hJ9sW6s4bkcKF7UCmScRbU/9FKkaEtY6a2m\nBePEnO3oM7uzqDmtI4DxuaoejFtg3um+tBmg/UnvpvyEJu2cxmN2f2IZz/py\nnTiAazJAN5tqfTYOki2WiUsFzPxE9e6Flrw9icaxWBdP0uxvqefVnoWMJ0qV\nGiEkN/GDnlS+/wzKHIhZ3h1hy+9L1kQg0cp02cKZFTTmAPSFSGqu/sV9nCdD\n5xtS\r\n=2R6c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQConCxYwS9MAKYVshweX6JAc2AoBpi7TlG2OYoGD/iM9QIgFLz5oEDj7BTm+EocG0HWuvS+nPysEyAe1+SjyK85wyQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.b7a40b27.0_1612364587244_0.1967291730678551"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0fdee204.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.0fdee204.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=10.0.0-canary.8e66dbfee.0","@material/mwc-base":"0.21.0-canary.0fdee204.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=10.0.0-canary.8e66dbfee.0"},"publishConfig":{"access":"public"},"gitHead":"f072f9738076b381b1be472e9a6d239553e4d7c5","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-eS20GB61N46jtaK5+inl3+VvzAXcnetP6yXtTEJ5lDNmMC/2BB6KYsinWFNzW0FDa6uTkUYlhg7C0O8rQhuiog==","shasum":"880ba8b6aceb560342e6ce41646cd4eb472cf771","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.0fdee204.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGux1CRA9TVsSAnZWagAAwZoP/jSowEBwpZhIeIPOWHsI\n6HUIJOsnlRXXCZCEsOof1POjLPiNX+ZM7/hDAjqVhPLycu55afVI3sF8sY32\nmnsgqfMPz2P4+I/mTmZo2pCmKYDbsfjt88gDerS3Dwjp4c9niPV2DjDLqgI4\n2nkdagcndEOs2qB7PpL2d2xl8z32hqWu/sClV56AVioalSFSswTvVaU1SnD1\n/peLt2pdF28uDheWe7PAjyKcM5m5lAST7sx5Mg26xmq85uYrSdPlqkXiLvTL\nxUT29JUDj17ajeFzbT9LLC+Ai5tI5LbffrNA7/PybhQnyNv37/s1qe0LiT1M\nfD9sOIBzKNDpOrXN+TVh5Li0tFQ5PTmWOKFr+Qs1UuWwaOJ0xXxFX5fIB5b2\n/e0cAgHWYyYoGIjNZInlP34R24KT4CpivyPf0YdMQcJJOfM+Av6i4U2VYucU\n0/Lb6f0QOVCHf8SRdBo8nwQ8fK8QfbyaNASj/srMFIqbUHm1kuxBbO7C3Ax9\ni2Eut6Y1i6ClOw2Xx10EwqYEURED8GV+4YPeck2vErmsJBDYKvzj++IJR989\nRmVKH/buiMR0wtfzszF3pnFPsFtEduTzAJ4cMcGvqmfJgSZDzxlV/NiOgxNs\nJyki5L1fTDy21v8iBvDFtqmbaeed6Ah98cBy9RX4w4zLsBr2rT7lmsSUq5Xj\nbK8g\r\n=gfj6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGiij0iTTccbomX1eHGFpmK+q8aHIXmtRXs3QWE9jeCOAiB/AuZSPgdq0ehvRZJ+4fUCRjNtWC5sYKqgoGcNBFQjtg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.0fdee204.0_1612377204953_0.839474423765111"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5160e548.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.5160e548.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.b5227247d.0","@material/mwc-base":"0.21.0-canary.5160e548.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.b5227247d.0"},"publishConfig":{"access":"public"},"gitHead":"37494b60e468d33d172953edbd3ca17d4aa342e5","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-mRXQyFk63OawhYmJkQEUkd1XXq7vcT9/6Wz5eROBvqwCK6jbyNQoxYRbMjYiFJ356k+rq1XuYkg09F152DjdQQ==","shasum":"cfc462a5dc83ba065b35e281746c3405ebf79c4d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.5160e548.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdnYCRA9TVsSAnZWagAAZowP/3c/66Q+vbu5viTvgBgy\n+ox2KMgjED3n1GjDs/BcLCeMT/bui6xFrxGjpSjZWsRMwYgMEnRSQ0zLS2Ad\n0GXw62BKs3cnYqApPH/h/5rfTmW5xykbdwng5vBdqjMzEa0Md8QAK5XN4hBW\nhIoHFqLcQbwRUuJ6LG8Ewl468GTeVLeKzbx1LewDqdi0uprmpk3eVc+VO0wt\nqhbipGaXuYglmHS9vHRQIPfBwZV5SO/RpDKUxbtIykf98gUqCsqSPrrByU0n\njtoIYBPBlmpRnDC4CS6PNyo80ZC1Y/Q3OHdRCTWQ1RIotD8lg7yTi73xI41t\nQhJtzfk0QmWqv4qZR0GjFlaarMnTj+/9cCMCyMiDHfo+NypDgyj/HME8no1c\nZFwIhE+qOlRoQJMk2k3618tjYzKYWudF5yZQptXWSmraEaAuJrtaH9jl0nqF\n34uAYnKzY1HX57FVhpD7jXoGji2A3oQV+Oa936RIBzTYAi4hRHltxkVX/yzA\nFP8Mn/uIDUQYga3CkM1H3VZBqHW9t85iCsWyr5+Rw3chiOPDH1kI7t9zdEqH\nRqawYGJ0v1qc2LvjRy0aaTa2Ngy1bJhWwToLqNdTzNtsY9aYISq72az/ogup\neU+vqmkKtOSm79QoibBGgOi6OkIIM2hK8JDmE7PZdsxBL/KZnuxpubAjfwKw\nTP8q\r\n=3Ty8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEGvPeucK4NdsDubfuwhxx/F2oVyZzexS5RmwcfkWGWiAiBbUv4nba2jQwQ4ij77YFBM3qRjzNvottRrny/k/6Nqbw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.5160e548.0_1612569048247_0.8878091784438642"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4fa2daec.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.4fa2daec.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.aac8f5d9a.0","@material/mwc-base":"0.21.0-canary.4fa2daec.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.aac8f5d9a.0"},"publishConfig":{"access":"public"},"gitHead":"49d5ec72e92627f861ab94dde045181b5eea9f00","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-Y55MiVd5taeHnw9CPWFquHNAMp1rdHADDcXSYMwog5xR5QhkgOXrxQuly1jeMDXJcPu91eDgky0NbragmlQQ5A==","shasum":"4b297895156b782d502cb129ff3c6558138afedd","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.4fa2daec.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdS+CRA9TVsSAnZWagAAwkUP/0LUUfCO0PUV0rWdO3EQ\nhY4Zp6SgNYFDWlnq3ozoovISTF/J5gSL1XYBaMeue01oYCvUSApm2UmKRGIE\n6gVZH+wchBscxr1d+acG1eLfD/6FLfXWQB43Cd5zsiY4wWlPNYcf6Vy4+8On\nJ69NLxBFyBtk/HQQCEcJyWYRuzRywAFoDPN66L5yepCgAanQ+RmSt2DV4P5Z\n0c05HDfQe4eXuBPBsZdeVnXzWJ6Wr82hE43H1FVlV9nELHMgHzdSwQYpniGb\nCSvr/ktVmuDyGxmAO5LbWr0gqaRBFdiy57rgiD4IV3e2kft8e8SZUpySIJOo\nb/KYebU5QmUtkXgkDq61Di5JqIUsqgW0pqWJNTsgUSYRiTp+chffSI94AP5j\nvl57wXXad64cp2Ek8ownOoyQuiDSE0tjDf0CaL1LIOJE491JuG+ES4dLqDT2\nMn7EKeVi+KOBvdC8HzH6zw3nhiANnA2Jr5wEe4UOjSx6wL6MDHcvseeCiMxb\n+Tphy5fuYwJf/W3VDAlcIvxsDKYB/cBSsGxfLHeT+AJKjJCYVIPfZbLb+UST\ntLElM/ibsABE0wtnl05C5XusH6hewxzUDe8Soyd4YP0bEeTm1Hx4FAb8VB1V\nQqWhxHzF8kmc+bfVsnnSmvsZoXxDJPolYb/FvJB6TI3M9N6kR9yqkwL1Kfka\n3o00\r\n=1Ser\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjamRXKIcigXxwrncETLjG6D3KfT9Ub2RYq4gMSqXKjAIgQtC0lOB7GRidOE7du4oX+2NdTpmcq1QUGk7eXyIBvls="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.4fa2daec.0_1612829885826_0.8413462079417899"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.67f285fb.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.67f285fb.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.750e18fc7.0","@material/mwc-base":"0.21.0-canary.67f285fb.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.750e18fc7.0"},"publishConfig":{"access":"public"},"gitHead":"04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-YM3OWynRdt0IEIP8k01fsGbHwZrhcL+/nDg/CMT9DijW4FRnxok7LAw929wsT4vPOnQEyJj2KZKYzR7mJzw+ig==","shasum":"38c82f930b376d10b208acdc53c4ae4722f27701","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.67f285fb.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdxYCRA9TVsSAnZWagAAHkcQAJmMRNE1ym+1ND8ViOSX\nkz1TCAAWRM0ahagiG25ri68uGt/gpmQBCAhiCVgBJrUHzppEOdE1ZJvAqXJ9\nyNm5pkqikRXGU89fyJYSH/dl37kaTQSeue7BKkusmf17T/OTliL3TRxhkyPk\nfYvnepqtW8/PE/3soQ69iOlp4ZST+E3mMyZUOfSIbdlC4tVutG2UemMI2ijR\ninsaNiLrdJ71z3KkW9hBiG88qsV8GVP0pJ6jUNmrIHtF7wVbmnHOamyIt/aP\nFfmiGIu+/M4kHXgr8+LNWf5BpUNghMNDlweKqfJmJg8nVp14UBJoOOz5IpQk\n7k2WaRLhzbpzF+GpzYLDMCsOjtbunX5i5vYBdH1FWezdZ6sD+ZARMT76Hejz\nDOAZmAmc0V1n2z2yHYQ98E45IPVNCp7cwvb1XRv8omuNlVUJTs4tqlvTv9yK\nZ3oPm4FA1QAEh6fiiD0ARX9mJayXAm8kwof4ejmgak5AHxvvanaNY6LFjn2k\nAlTYtUtbMcrfgU2yYfTkSm1SQ49QRr2XuZ9WIM+8xfuOy8S50JVDBjS/PgAJ\nOn+0Ft+/hk+Kvhed0R0HLcqiM+ecu16KYPvS1de0qal1Xy3DRSxvW806lhva\nnuOULE22ldBGK8bwqK/fYt2Gv5k7R/nX+AZAcQKF+QlL79LcONfK2Acx2VYE\nNwL5\r\n=BVAt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5PzK1WN+0B1C6BUv8u2OX11Oepnbiz4aea0LBT6lOFgIgJzbHWtiSDJIIqPRRjcuhnW5Bs1V9LM2CHyqPbkz25fc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.67f285fb.0_1612831832291_0.6974275489544586"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.58cd5a70.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.58cd5a70.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.b62b1266d.0","@material/mwc-base":"0.21.0-canary.58cd5a70.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.b62b1266d.0"},"publishConfig":{"access":"public"},"gitHead":"bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-+79bTVZYp8Q3cipqmIa79f99v3YNbe6pcYq61ftmqXWRtkQ5SfjNI5nBqFJ1MLlXM0FxUoyFsrKbC+G0N4jtEQ==","shasum":"18d89b16b17fe5e18ccf7602b88aed4dea3c0e86","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.58cd5a70.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZcICRA9TVsSAnZWagAAlGEP+wSP7tORHePvd4Vg4uxw\n+pGqTTPOiwaKWJPTPATV26liow3IUoCnacWdGZ8nr4fU1sQ7ukU7RBBRRAqo\ng/AiLx27Q0DVRH4vxUVcQ5KCpFfYyQJ3PxayTvlWMDS7tMnIcvv8nIlnCF/F\nbzpUCbSzIm4qdazeSEna0IFgXOVbuOj8PIr5F7CHRkUTz8fxIHoNw60KmQ2i\nkyX9YBHYrZssi4kPxsXpBQpg27YLthx15mbSRzo7sEVb1WRCBotTcUN0I5G9\nykJmlmlEGjWIG73LCnevJBbaAW35CmMUn2P8pXXN5Tf2BQb7uNDz8UIBcTo2\nj5bXty4ApR/QSnNs03P8+ayflT3+RYy3PzHDI8Sid5BAIKn7RnOrPUh/9RE7\nkMWRqe4LbT55hn9GsfumFrUw0nHgqa9r5K8QMEFj8WCpyCdKetb4eAj3S8OF\ntinSdAJGFWdGmgLB9UXkenP1tEYBdnbqk4UMBwuCrJpgeK8pIDw7AM6PX0wG\nCVJV9Zs9FshpR6dLaSuC/O/x1pkpE9bancnoYZDhulm2Qu1IDKxzfVTwQtHK\nQFETfK3KFpTKj/VIukUNDQQn7aWaJdhjnIn/Fk9qMxCOErKlrjW/sLcjLdbO\nmclI9emRn1UJt3dXZM7JSiVkad0sWwpyghXTvS+bGXotcdromsQ0ALRs4uhY\nyyO7\r\n=BY+8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE/Mk2v4hFKjbcyqArQOc8PyrWJZ0cBPcS2Irwov06mNAiEAkYRJ7E4jTBpyo7s9nGycVidlAhkTJUU1oiW0JvpuYw8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.58cd5a70.0_1613076232037_0.9735577826577311"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8107ca43.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.8107ca43.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.8107ca43.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"579eae14a8b8a347a0e4b31bb6650c994d1df472","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-bd/U1qEDa1EUJacO+jTSyDsn6nbP6M/R1Uqscy2dIkOZvz+cUxo11LNYC+7CBE//TlrvTZZS9rvdUrOdkskqsw==","shasum":"32ae3e57ea81068ad85b97bbc9f4239f0b335de8","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.8107ca43.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb2aCRA9TVsSAnZWagAADjIP/AvZgUpywjGbEKgC4G+2\n4Lx1mcK/TCHrSaqcYt7gGKwHeE1F1VpDr2NFmMO3srdZmKWthLG9XvynJNJR\nG4LXF8VeLmKaYficXzd0yS5ad3goP+CABozvhNW3Xbvl3BQSzjZYm9tZzsTw\nxkBC/KULsUKitxWv0m4wie8k73eA9wr5iQQZGQVz18CnpiGnXVJPhfz37ROK\n0pT9gQJ2FGShXWrq7yD4XrkWXKBYs7sLRdaBMrpU+19RV3g8GPVlGKrcEcHR\nwKPs2f1pqv5AVR06cfuwcDnxhDirQ5aHH0jnK/nAfWXVNpJrUv5VrCWQXd19\nlL4HutTldoiDWHu5J5PyWhhM2RJ2I7rwk26e7gJPvE9NgvPu1oKDa0D1SokG\nRABPKaRaTahc1XI6Fgd9Hm690ydVKefsLGbzmyk6C0GO7HrToei/Qb74ByBj\nQSiYdlc0PSlO2OKW+7ZD4gmepA0Ta7+7Vt7pI6Llg7z4S6bKiCKQcPXi/d81\n29xtah7eF83451+kA5tDl3q8IFkADADaWkZ+qnTV3qXepfOvAfmgxNkPAPBt\n4gw0Wu59evZkiYNv11Lj3tdCju4a0ZsKaSAaQOBgzMv3uqQezJ7kNeCuUqXt\nLEfxPZLxwGXpFcUePrsC4Wbu3g72q13smZgQ4qn5DdOzRwD2auazF9RFoPEs\nQ4oL\r\n=8RFs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTQjy190ihEq5JO1+ya9nATjnNwVhXp3isNKsL6f9X+QIgR5U9s7sIAcsYkGjR9n+OzLIXcjCQ21nTOsjwTYQXJj4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.8107ca43.0_1613086106251_0.7242928400765278"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d35d64ef.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.d35d64ef.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.d35d64ef.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-cm32aoiWdlBmSU21W1uDKAup7oWSQgo2L2tP14yyEktErDYR4i8vIgmhvIOeKHIskchO7mgcjOsVrs7F3XKoHw==","shasum":"69ba28f5d548bd281e7b52edf4b9b4591fac2dc9","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.d35d64ef.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcDpCRA9TVsSAnZWagAAkncP+wRSqmskZaINU1d9ohYO\nWSJfZlNiXMUkfDq3vX6sv07irR/ZfS8N4DNWtiKgRaSs6l/S52F5kXnJSqqg\ntqmayruY4PMR7rOs8L0vG2g6IW9yJmtOfOBG5BnbJJGer78x0oEkixdTjZH7\ncfQrRbdTdD8BRza78QEV+cYxCiv9B/mqSlgS8dATM33qOjpGfHLrrK0kFk9G\nQKHKDRnEGfmktbYFLCMrpOuPKfBWz2+X6cx2E4S+MR1FUmFFEJDnmDBSAUey\ngrSYAyCyCQUBDyLyqWAE41RD14mKypMFvT9VzqXgPN+GBj1fRWwXP3ArpdL1\nh+lzywrkAdRzRPxM71Ly4vVAiuaFoLxv461EaUjrrVQ9FLL1nGFW9my7kOp/\n9oz7WG/XT00I1g8Pl3i7ZMf9So7gILRFrnnZH6BwZkoLMTaf9yBe9MuG4Usb\nRFh5M9xgnKT5hkrlLlAUvCqACaQod8UioBGey2gEYJZNz/n/yDOmPFB/tYhW\nzLzymbSnZlQlvcxFXuGUrO/9JF1h8t2ySkyr++I0JS8ugLRpFu+yiWE/LHOV\nuUsRx5OpsccIJseY00kIoh5+JufZD7b0vrNy0LJOix4cVRPx1Qn3wUdllyIh\nAKAM/eNuzc/89vcmckE50qqSgs3t6vjWe+f0Lv0sch51hMDTamOeL27Cfbee\n4S/p\r\n=l9HA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8okgPe6H62046toiZdCk6CKzCIXmkjuA2/25zm7bIrgIhANltQlZ6r7JW1ur7CgfnHvjHk5v3hxamCqeJ7R8gbg/v"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.d35d64ef.0_1613086953031_0.19238700363914263"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.78bcf058.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.78bcf058.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.78bcf058.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"98a4001d56b1e200103e0862b83b661c87fac551","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-ZOob317UWq1T3fTv/lVckN2NajzDcf1P4cBbmvneXomXRniBh0kGBsut5oWYi+fWpicyu+eE1cCXRtcrJ6caYw==","shasum":"7a3ce58b3467aee6ecd13f28aeb4220389e09776","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.78bcf058.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdA4CRA9TVsSAnZWagAAzaMP/0BTRv8srW0qw0CIFH/5\nw/hFsmY41Skmj6IGzUONRfJZZiKT31QJf87+4nuEZsgGkY/DhLd5qYBAtlo+\n74FiHSsTaian5FYXvCoPe502wdwZeo0A3e9jNgaFaVoGtdS4HnDDgFBOmEjM\nUFW96a4d7H66rks5bi8UElZKJlUeGi8euDdS/A2YvRnxUB1lMhWsC8o7O2xA\np9lBu8Wf1UIBsT6XnZZuACtnwhRyJdxgzH5ht3gINnW5T9YLv99eULnFyCmz\n1Ojhkib4DdLQE35rlqFm9WGiXFwRnjjN/rgKDVaksX1EtLw8r+FIkxVYwEjB\nzPQ3TbHk3Ndo1GSBNYp2W7aVdRoZYNcYZNDRBIKLvMNVEOe0/QoJ0FIkBZUC\nOS/7H3h8Jr75J6O7f8hB8DW0gY2j8jjiaJ4aTtzYxxDCvRFqx8XQGNaaFG/y\nfeeC9Qg2sRqIPsw/1qjKofZ48tyWeGzOfinHj4ZZAd5GQPxVGWl433Lb1FXW\nKJage5E1G+lFqj/Bxdsgiv4MVLYwoZ9XrjMr1k1GViDnd/Alc0dlimcdntB6\ncysngjZyrHnKaQwDzHqS+piIxREOBLXbLRtn7WsyBj/YAY1GOWuzRjLbwQ9r\nhOgMnMyeLtRCn3Hge/MtzplVfK5lMfkNLmGUQEs0yqff3M9aiz9Hy0uD/lpM\nb5YE\r\n=yoS6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQBQcVX2mvqG5jhMS6iVx4xjLDrX/xj/anB7aSgoM6+gIhAI71N41Sq4+Ci3m1NVsM4KAy1LqJvCgqmyVZO+WLtc69"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.78bcf058.0_1613090871684_0.03630809983408301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c6908fd.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.0c6908fd.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.ed88df700.0","@material/mwc-base":"0.21.0-canary.0c6908fd.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.ed88df700.0"},"publishConfig":{"access":"public"},"gitHead":"f290af657508c2392a786548f206e90e8bc44124","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-g2CZpwo9Ba6h3EIUDNbEnAtXjX24hthe46Z3caQ4FaJBIkSRGRwmoUJkdy7qWItdr/7cx0bwanR2nl1I44aRew==","shasum":"221d4bcc092f2cb09c904e7d9947596540e51c04","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.0c6908fd.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdjDCRA9TVsSAnZWagAAm2wP/jf+Usdz+4VoTC+CmuzM\nfbcV2bjTmIhbNIjCaZ5i2IrlJKVPNpc7xxoNPb2ZnKFsbc2wgh1HVipJRaEl\nLI7kArP6c5/Tu7gAHWG9xk/HEGFa7OCxgFP6SXZttw4G4QNBwTw+EEZFVjFn\nSEll2TtjSuPcS4cxo4/5fJFqRPM1lId3EOyBxYrb4g88v+NS82619AJM+B/j\nrvlaAUIGjTgm4kkCFXnP7824+xkmbvjX6t+JKbxHLovROnblspHjWm53WKoJ\nVGEmoUQ5iTAXUX4+MCto2Vxhe2xWeNXR1lvPnSKbv0p/JQoID8kYe6ki4FHW\nAMy7X8OPLBAnkFjNH1dLUg959olcVcQ84/dT28M6vupTG/6XiOxoMfqgP2Rr\nq53K9DYiC3Nr5SJs7nKbANZVOirDGLLRwxg7wVKeSUgk+YHdkj4rABiOY3F0\nLDUfqSBQINiduFGuFBBn1Hk00yAQQt2F6tsBldeI3hYKkRqMFzIqYZb7REC2\nO0Gx8VPdhWYccuyTTvoPGK8CMtzaCR/mf/IWq4ryThTkzbPOeD3/4uHpb3Fz\nTkbYuLx1q4CCVPqDMHDpMJEk8QqA8Z2xJlbnI3t7PSYC0WYObTxCsVI0SikY\nAnH39jRt6jLhcnJlpdPNBU+WB31sK1c1WnuPEFVZv9/clbQsPr+wuolN2ttk\nRQbY\r\n=9EVq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5O82q3rNkGR6b8PKghVYeAvdagfvGiSjHIbSlx2nzLQIhAPKpkieRT3UsOaAqPZMsgH+uAeXTMVNPtTd0WgYRkV/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-drawer_0.21.0-canary.0c6908fd.0_1613093059418_0.7319429559608106"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f1f34ee0.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.f1f34ee0.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.71fe9a067.0","@material/mwc-base":"0.21.0-canary.f1f34ee0.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.71fe9a067.0"},"publishConfig":{"access":"public"},"gitHead":"b16a616d2cecb5d8aa3c279c76b01b2f49ab6965","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-v6aNEqg6IulTWZwqBznUBbTVWrxBXUB0+H9NDnYIiRhyT4nxIuwvjPResFHz/6gCRqCnG6F17UGX06XLlD+9lg==","shasum":"41ca55a0432ce2e09e15ccd8c8627e2a62fd4444","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.f1f34ee0.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuJeCRA9TVsSAnZWagAAor0P/j61WfAM9HV9JlXjUkj1\npsrjH4euGeS6OgsGRQJHXmNY+AapjXxlfoXBwGzu6u/AMWQspgf4z0YJ3Pb/\nVd9S30CrWF9MQAImSkO3YkqVdJT2pdRm8T/nyrFYZN3lkdf+51dWWavYRktj\nBMIy+JiRiWYQSoGuNjL9Z9Rqzr0vaGqiITc64r8A5F7w5fe3yuncipt6f02W\n6KqWepVzuJ9jO9OJzdOIGmaZcOo1+6ATrRvyx84z1NDjitkk4D4F9eVqsKey\nXMrdWo9kG7k3rOnrUKaiIDuvEBmHQxJZ0+IQo1T87VNH5G4z/Q/SOSJtCq0F\nRUu1qUgfvWryyAAwmUZCYQyY8HxkhlFLWwz+9WMuysLa3lWfhU0D+XbshSBs\nMv6wT97uLw5l2e9wNvUGmR/Iqz2fdd8adZ722XoPGbm7CFmUCLTZv7IuMz2l\n2leKjTXnqsjejnyD5kME7EhsVbxHA5rDXo4haJdstoZT6CzRVL19NZA5UR88\nXVoSrYlIIkqkQEv5h+GfKzw1otGOhUqjPTWnwxmEImcnGJx08F9zQ+2YzkWW\ngiV9P0DO5UMV71m2ekHGUkW5Ici17F54pFn2ysy6ZkGq4G7hvW0mSdD8IzUE\nmsmIor4Z0M95sxW4qnrSF4ARwGc6rTNDz7m6yJ6G67oKn2YNn1fq740vWJLA\nvyrw\r\n=y4im\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAiaDDpEj1+XF0XH/RH9l+NFEiGqaTRwJtQQIlj/+JCcAiB5O5c+wmNAROgmFTk3leDJWcds0LmVIL53vxS7jDufSw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.f1f34ee0.0_1613161054067_0.5152332567530875"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d84df029.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.d84df029.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.0fd56a86b.0","@material/mwc-base":"0.21.0-canary.d84df029.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.0fd56a86b.0"},"publishConfig":{"access":"public"},"gitHead":"af09ce2e1ef6f6b486ea977ab8890e81af842541","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-XlxEYojLVxKp0bnB9DryB2lh+dbxEEIla2n4oIu1dNuopPK1DVLqnKrhAGWHUXdhenlq5vJy2BclLXwondUBSA==","shasum":"c6c75459a2bcd627401b75ba100b33710f7ea93e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.d84df029.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBfeCRA9TVsSAnZWagAA94gP+wTvyppVxP7jo7HSBPVQ\n8ixgZU7FmCMamkMwzw9qpK2TuqejbWeWVKTKLddcBYKci4WJVbp1Fm5NgVtL\nWozUDVjOIPhPic1zDr94d0nbJdFPyM2kmUuwNabyIU37mqYLfknHJbB1jqMc\ntOoC2NY95c7KVwEGLD0HXyYkNdaCxPO0T1ao24rqNwcEwR+vd6XM3UQU69IR\nPwnhfct6+bKtha4N851UCQ1wpLMsH7ROydGr7FOsnjKUJdL5zLSpkEtpT0ju\noFAg150ZHBjFroHofEQFl5cfD6w+ZGaTCcjGXuQsOPeUKvANU7a91IY3kpSV\n/PduPkNzpa3n6G+pbnlBnOElco2LXeL56L6fHydc8IoZpODuyD/SCdfxqY+T\nxDevCN69KaD/91taHEwWt7Uv49ROuUSHct1nFV9Xudh/39/iyBGtqTejXkhI\nE8fkZFgZMWk5FTZrn1abZuTWCEkMTIsqWRdunY5515VBafoIGWpq+NkTU+CU\nax3nQzFAekqT9l6wgq3JN5btsS+yroixOVEMDHX8OS0iZRZyfqMTIraVmz7h\neMzg/Hb1cX2++7fPciD9Jv3OyKHr7/oiRjVtXKDzAR8OeOJmub65yLVS5pO2\n7nQDIV+kCJvSutvhg4smU4ZlG9+WcVPCnXf29zQ7MnKFa5x0X7VzxTZtYzq2\nrJmT\r\n=0fef\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPMwVHJUla3SasODf/InaIP9e+71ex/ezuCx+DDP3WiAIhALTKUAoqYCV1LzPNv5X2ailrCdOt+Uufv+ocYd8keS3E"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.d84df029.0_1613502430142_0.9767544835507203"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c525f471.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.c525f471.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.c525f471.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"eb401daa998f20b7222c2787e22c669e642586fd","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-UQzKCRz1r7YKCPuISKSu3bvClqrzV3cbJtGNHFT8X7KHpdzc31B4azr6IYpdSuNNuZqToyEBgtfTMb997W6NOw==","shasum":"eb96dccab395cb01f2f3f4aaf5ac52055615ac02","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.c525f471.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYIrCRA9TVsSAnZWagAAntwP/1+BfNmGsF8l2YaI2ImE\nC+ypiq2mO+hhUgm9BTVNZKBi902rs46SDpgNOHFR/7ARuWcDoIO6sDQ0D7HP\nz46+8RLBG5d8hfLPubgveEsJbrLELMssDw/wPcTUIxviYLE9UpmJSLgcN9Il\n7J8AGPTO+M/T5a6s2nxK6XpKG8YiTVAkQWMd0q4uoKWoRiQRQXaWOCfkou+4\neZAzmQkgdvxY0lnAXdjGAKxqLKh3IRpUCa8e4SndSUUFiHyZTK474KWnA4RW\n8n8el5BvPMi3Lu5WGcuVS8jJ307worfZAuXg6ZZl8kLa8Xnc2ftV4RSbBaIB\nJn5JO4sq9+vZ8yIy3V8FQgoyElsumQElvHaUm+/l/qbXhSsEk3qCCEKO0PcL\nomffaCWimDquGf5iUC0uiJ70eUzsQXYF4dG0VRXcJc71aS5XVIFZoo8r1N1A\noGSWk+x5fYf4748RUx1l9DA08wQfHnEwECG3vbg/K8LFqZS9Udgm7jJv38uq\ngZohMtjh4iXfUFweIaIJD6moQ831cFLZBP22cSHAo0rvXEDIBJG40w9SW39h\nlSA1j7+wACWVWFXDJhmMg4NZRAGVx4FtV8W2X6iKbL4KfV7H8CA5KDjOPw6L\nGBhIHEupSv4+SXNurJRyFxuCy9bL6poC0D3ihSds6J75MvWof6NfOGJXG9Lo\nhEWq\r\n=TnhQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFXKAK388pFRVVCMtXjzX6/EAYzaM+WvVdmJCg1Cd2WpAiAo7KkM2PYnnIdvI1bwcO/+irsUXB0Fvwto3N+OCByETQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.c525f471.0_1613595178843_0.9048208761793921"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ba7a1b35.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.ba7a1b35.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.ba7a1b35.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-EszYjiExEx742cS2nfuX4I50CGw/bvwBVAh45ZymAgZ3RfvsHm5LwOEDqZ1Ck12jezncXfcSpo32wSCSLZU3hA==","shasum":"f57a89b54e041577fadc8fca0cf3dd2e4bfc3b4c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.ba7a1b35.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwKmCRA9TVsSAnZWagAAiZ0P/ikE8aya2sBg/QRApp5f\ntiNNgiUvhnaAwQ7QsRyRtqHyTkagbSM0xAmhL5N+B0K/GMKvyQeBQrgzd/Kw\n2nea4sorhQ+ZE4N91EnkTnlMLflN2/dbccyxB3hbLKDfP/ZoRuEl1QEhXgbQ\nVZ6jIWR3G5Xolg80UXyMYoU5LZ0XrWZoxb6a0RS1Pi/h7EK+3MnGpitT0KBJ\nAtqPAh5OwSz+JDqaBQKg3aLCW9BKwHAYGp1GD5PS26g0GQPvxhz9faObjk11\nPaLrB/YXdLb9gTsMwSwLnlbRnrzca7mHSa4JryiL4Gol3BtEGcgZ7Yx8o0wm\n48hJM1COhm1ol7QB96kf9ZMvywB2Y+uJ9sFEBUjlyDGzszdXw7rNdkWGRL7j\nhL79dOnusGMVemThNDeIlIujYz6tYaz6yUMhetC/47S6znaT+8uv0+vgavHB\nPFVHIK4t/muBQx3ThIH4hhY9NVddFSZapP6H9BlN0p30gSgfR7MPZnbQXNhj\nldTto4HZHssVBujoBbUknwHWkOVwk2zNlSH9GhYzcKvi0cOrBrUsREMiwEjq\nVE2z807VGuUeLQ493+EhqBXhnYWUdjzi8oMTTNM+RnzEFewksLYMgWkpo30k\nIwtuQEFXMyUCViwzBF2L1OXJdT+qjpu2qzwhtBs25EQWSSffVCF49u7FcRRO\nyScS\r\n=T6D+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCA20NMFVJPE07IiyoIzoOcUkvctY1capFLm9uL/SZ2uwIgFznbGwjou3+U29Fz6t5S5hVDm3srmImKNnCoEY88YDQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.ba7a1b35.0_1613693605635_0.3757172988989994"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9a566dda.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.9a566dda.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.9a566dda.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"5093d1f8984fe9f44acd6597512a2de2ef5fbbca","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-SchuGKm2GktHLyYAb7k8Ho+v0Woh/F2HB1D9K8g/XdkZgbhm9TJLv/dmZZo3uOC1B+IFQULP7SwOs1n3wrIUDw==","shasum":"8ac85dbd72beaaaea0d39e05c01eafbcba7d12c6","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.9a566dda.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAVeCRA9TVsSAnZWagAAnr4P/102sQnABjhPIlNAerd6\nFn4AgD63SonKIoi6QvzH+HNBz8iiW12CxHnM8OgE9uk4Xh9+4djbtIulegz+\nZJYG5qhC8NgMjgCQz5BENPYCrQSXU+q8vodZ2+/kxK8HsURclA2EpI/AaP/D\nFptEaRrFMMpQIZJAs/nNDkUYYecj8FY75ISbWs4BasdyJO96bzR6aafUyUx7\nCghQ+Lu9ASp3DUHw5t0ru05xzJtusFwwn1VwgmBsDEltLC6sEVuBNmujjacp\noZlFfcUVDjfFlZ9IvUyaQ87pZS+NwSpuVxdBG2QCx58mF9GW18MNhnKlq7bq\nO4YoTTlFK3jpmc/k7Xwc+Cqi+/0VZurpBkv62Ov0kA8MzwbxDvd+ca1myV1e\nZcreE44Z2mdCYH51dxc3c4LUSBJkNW/C6ixzUzx3XwqGeWrKaY9QWHLZPfY8\n5h8cr4ht7gG/Jq6NobEcP8OT7U9xnBbf/1WEXYaPoHMAxlaVxjPKIMLdrJ1x\nsr4UVXdypHQRY3dzvxTuESpY2WmZvZ/5WpyI/xGJYYpoMoiEmY727t9QfqOu\nYzNPXGqQDRipSjUbNDn1IY4tpbZi3sSt0g3YIZY/+xZY0bTjkUCYwOw7ai8k\nUmQLx48fR4t+qKMI/cVmS9WDx7I+dS7q1saVpJ9oU2ZIGtYUXs71bm6mQs0K\ndexy\r\n=3F9x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8mbUYNf7/R5VqAvm3YjTL1falxUsFFyxfA2v78rEjhgIhAIhmrciJH//Tg5OY29O9ki3IE0Q2UEPKX435eipNqrFT"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.9a566dda.0_1613759837634_0.09893471723275837"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.55addb8c.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.55addb8c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.55addb8c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"02634c071c90f7c1124ae44f34cb20a61bf49350","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-ugQA/kP8pryNyuKwUNdVo7kcvhUe9LCZmhZ8GruIkcOo22mGEc0MqLGBOwi3C+0qTWwdyZ7YZPrISe/d0ey3fg==","shasum":"8f52b90c4daf089ceacc9c69c4b43b6173362738","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.55addb8c.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDVLCRA9TVsSAnZWagAAVOwP/09Zn7WxPVvbNi+LeoFc\nDHZIrx+MpUWZOdl53Z/qKKZ26Vm928dBsvkuOoMS9uNOx/h/2+Wd//HaiImX\n3MVLGRQY9Lb+Lpd3VRIkgBTvHJSEDQxQIGfMwgXX0a3W+M8Dlv2WwVMc93P4\nmMDs/LBvKpLUkaSGXbGe4eQiuQKVvC4nro0w9QU+PWOT7I+6GqW/NDLlyGSp\n+YzomPH4Xjc8d+LI18EkEgvR4DFICq/4QBsB5tLaDPY9fWoh+t7aYh18NhbU\nrSgpzH+vzB4Z/L4H4GO/vJl98Q/5x3SfRe8NHc2kudnXRZ3bxJFWqt97KSbv\neRRH3BRPL1drbjy3ZyrqzlZI9+bl+G1cx9DezMClKCOM0KU/mniJj32NpvIq\nXh3OMh3OYJT6LhXIAlyUKB4DARgjjbHJ+RqoR/3NiRDc2Bc2eUlHefGm38L/\nehpD4X3dOiSOokgAuT89AiZcMcwY43794fFoZvpdhuwWjYJvtat93bzvXmSv\nCKr4FF9IH4/3jOpAQLUay+67X17Vkj397QCiYj3Ky6FT0BfAokhBdUSbyoJz\nYCrajomvB5OcaremZvhHuV/qIDwD1chzRmKaNFxng8Y22GN/iHvBaSYY8kXF\ncR4CwHvRE1Ch+RjznSydQhuejIwC590PDqy0rZfGOG7z/Fzy+/q3O6Vg4Fjx\nUOh8\r\n=Wb6Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAwE/XJYxQvrb92Lu47Kr8GQQXsh4A99SnuQLSlXJ5dcAiEAtfn1TOcf6MXEeomwq8ySDkzvYOj6AFdLkG3th5MulmQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.55addb8c.0_1613772107201_0.2790361742567069"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.85dd5e9b.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.85dd5e9b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.85dd5e9b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-PXdcWWt1mVoq+KM0u0LTY2iGFuFuV9Z49SJtby72c+iMeA6cz1UXZEDMHYaZT7RurcFq6yRksFTLNdBSY0VGhA==","shasum":"30b85592290b87a5f07112a4d0a4601d089e6064","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.85dd5e9b.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGYGCRA9TVsSAnZWagAAdwAP/jMHianIaxeW54khsals\naYfU+EtAVoDiBjPfojiJ8x2J6bmVCBD61rQsPfFT/tytZVNqO7OGwwzKFeVB\nu/VDk954AsA6iFJ4FOTD1fjNWQ8kdDZmAO46RBh1Rr1uLovirDOkPQOr6xde\n8FvIcVT7vnJN8Bokr9JCzoxe0KgYjduCzduLhV4ZYBfn/UauxsWvlCQOyEVS\nGk3JSELafZygjbenXklzcgGSlw55uVu67SeP0ke6tdYE61krIMD+Rj9v8TyX\n5UGyJeqi0UwLQcYE9DZ0EysUXgM6bikDvYCFZ+y7gFcF55CpVAeV8fKgnPS5\ndNT5AcWJekMAOCanNhHZ2HmrjwQeyNcRAD6mzZrP52U8q4LQ6z6quRKgPie9\nsDJ5PUPg5q0hM8KajJU9kfLHBSfdztJpXItbIBzqO/0hTZZ0053URZkfvDvR\nvv3kK+kvVcV0iJAXzX79RnRoDnMxTfz7EbCEfZOf8V/ZHwEXF8WYnaZGhAkB\nP8eiRuCFEdDHlRlm0RYTb9kmCdTLWsKPk5fopirl2PsUD0DNzDTtrlYdTg/4\nTLUT08ENUaZSWT+miAS/ZF8XmR2mB5DSTDzCtRnBOLMPdEQd9MdSJO9e0rjJ\nVfsREza9d6B4zU/fcCaemXMf6+5n2FYI7n2AuLBThi6Nrlwo9wxT917wk0Ut\n7GNm\r\n=PugS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD28iBHxQ/8HWibIor5V2TEH++8Mglvf72mbSF9c05zAwIhAOXwLsl6qZUFt010/KdN2aTQVOouLzD/0S39q6byWv1Q"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.85dd5e9b.0_1614046726447_0.7722298297571604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.aa3e078e.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.aa3e078e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.aa3e078e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"2acbbc6ed6d9f649621ee54e8265c9d26c49f634","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-XLS0JoTHayYSOQEMzztZWqo4/mvYIVfsE9wG1wHC9DoZcRAdrTGcqZ8aQA3QLv6B0+QOMJYY1s6jPCAdEde6gw==","shasum":"7b2f625a6490a53018da7836023b732dcc95ee3a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.aa3e078e.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNTfoCRA9TVsSAnZWagAAYIsP/j3oDlL5kf/mQEz1I6eS\n8v/SocNINQyBzCiRf6TB1UvkHBMNIOQLY7SUloawRVn9SKbJupEc7CG8sNdL\nHrdtsErm56njfh2H3P9oyq1QpCmCh+q4GVJkFwM34yNZOrvE89d97yyxb9lR\nn1QsFZhzaMoMqxevjpOqCYf1725hlxloUe9Qq7eCPZwYa5EjFUaQCD2YiXI0\n7Fw8VlWNPz+s/CMX2kD0XMTKPHvkDBxccFkX8Mo9M9J9Faz0z+DinjmzTsfT\nDTgz/A5ga9Xd++lSptaGJ4ecDoRaX3VSeHlepvt2GuQ4VPQpzjVmuebo45kI\n+Oi0f5FUUPBRaoBIFNIqnnkdyDLRFEojP52iUfc12/3AKhVTTRGHDiE4+J2M\nwdDVvSL5reDFb/i332fOpwy6NvYIoXMXw4w46c6B7qLky1KIwAZ/KjX+o+O2\nsf3zp8BL6bqPrcuxfLohzz2rCC1UJf9R4e2KaEc+39ttBQvM3abTD0oX33oL\ndLoo2vknQMYHqYxTtQfctkXi2FfbLtqyc2m75WHu3dU5wSvf1IviQqnwBY8u\nn3L34S2+ZBLA6b4k2GCXWCNf6x2N15a/Q6ygUkgXhfSdRyxKehsaZ4L5Q9Jn\nht4GQDPmTpaS6jpTgzG1wB/CfsQhQQ4yrh77maO4yftbeQ/wAbw/dsMacN2x\ntVuL\r\n=jor9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICEls4rTrr5uXs0HSEmmRqDwN0Vqje2Rdbzig/gI3B98AiBOwEvWE4rGuHHdh+95aM8X8Spml+FVqZbj7vJLnYhncQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.aa3e078e.0_1614100455676_0.2832012738576668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.dccd254e.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.dccd254e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.dccd254e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"7c3011f1d9328f6405596f794c28c98485d9d40b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-Hh9cBxVPS0x2zOeok1UBUQQSiLdD1RnH2ZV/GO+7Cy34mODCIqusPfVdyoQqbtRK+zytze5p7MC482V2Uq2D3Q==","shasum":"760c69bbbf0f1b125d16def25db16c78f6341172","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.dccd254e.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWOXCRA9TVsSAnZWagAApGMP/RftJFs6PNjGzEPh9DW0\n3g4yoaf5TXH02CuSLeakINElVeCC2LbZ3rzluECcKfZARH/BziWPcNsdinFc\nzEQbw732VADTL26MMuqQ7QJrXjOgSYfVHvT79iYHLFRWdk/9F90UpOO+lzOt\n/PhH6Xj2kfeOlmYnAbaBIieRVwTIazAtYv8YoVrY5viRnURM+mpsMfjf4I2f\nCOzrZCyRIRCaqPaJAuVXnww+RetozhfRug1Avqg4jkCOJOJBvCmNzuuBOUyb\nFBoE3STywkVrYD8nGe0YU0jGaSQFq08fvkyCFgYnowW5CXZ9smo+UYRuOlLc\n9FNtMKHdXau1G6rl5/PUIS4XJgTn7jeZsLAXnUdMsBk/E2b6BvETXIj+BZWY\nJWm8CuTAuNTMtvk02a5yqz+LSQk4SNS9lTNR0Iih4yeEy1YsnWoCc274IiZC\neb0N/zCYCd852OFLxDTv8Gl3okLMV36owx1PPhFUdU0v7uwZd1Fx2ylhixKc\ngzpvF6m5Al0kIphxGKtIYNPaxQqqcicSfe0dMSFlZ0auOT+JLLjhNcTNK79/\nMH+5kIby9Yarb6zf4SBfseL3j3Pg1/B9zef6AQWUBpBOckWW4hgPOSUmfZAm\ns8bEWqw0XorjX2E9ohMbXqqGcAovxXTrzMtC/r+YoMv8lBQ6Z5xeag4nXmCY\nXBvv\r\n=yVXI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBz+4MqYDfFN1z8OQDk9WfrKLairYALw/ivqvCNPgcneAiAIf397cCJQbfnGQ0vmtPXI0MsjFOdOfeckW0ms/cm4JQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.dccd254e.0_1614373782892_0.2110203835649096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7dd1a27d.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.7dd1a27d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.7dd1a27d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"15fa381ead1eb4897aa006da0f445765fa9a037b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-qdRGlRDsMNThdl4lkdqyUq+09LE8Ykz7P+Ct13oCoFXeqCEKP9PO149Kuh6iQuriO1jk5GAVyO6jj3S8i6l3uQ==","shasum":"7d499b70fb019ec2b344f887df22d578010b3993","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.7dd1a27d.0.tgz","fileCount":13,"unpackedSize":57353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWQICRA9TVsSAnZWagAAFGwQAIYNPMQONj9KMRW/ZeKW\n2ec/d599YhykMw+WcJi+e1bopsNr3zx9HDSqKJ/a5AWTQKMA0C9dzlk7z8Jt\nP47ISseaxK5qy46uXjqN4B8e1OLYnmmNipFljgNR9/ZHNyKeKOEqSswYbRl+\nD6MGxFJlIf8YBvjz9gf2FluuKdQokkWe+/MiVlalbhyORxDTuR0o0M9u4G7G\nhV1WPuesIVLcwHBMA2nSYlDywVcrG9IOBi0QelDQwbacg7nki+WJJxcoA2cb\nePqAyV5ojoCdypLLDo6Yw+nhklpnjNwU7QDt6wx3zTh6oG+i7eASajfG0G2t\nioT2nYW8WB4hHBb5BpZRUi8nJcFZwBNe7myuRz3/fMGyvFvbFrkG+QX3fr20\n3ZJLxRnXNb+w3+3sTYWdHxsrL3GNNPkNK/kBZUSzw/YrAJkaAkQN2mxDp4fa\nUFwU2WkZzvPHjTP/BdCPDF/8FHSjze1hgb4hypx9K68uHI3kUgDmgKO1vohl\nfvmyUwhjLysW0cxJDhXU7ZgdRQUC9Dwykrrh1SzynYLmPmsN+1/CtWgigBn/\nh2l+lLgsocOXlQSB9+KkTgDlcc3UryDh86zzmS9zTnG4FpCWUCKxPS+FrTTI\nlX1FwAy//fye5sgpE8VSTIerfL0mMHe83LjZTugFRU9A2TkDKvE5dGoWe1Ia\nN4lb\r\n=IzQt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAbJby2qK28ZAa4VgPOfvuD4CHzxiJql/PU9Nx5fjtolAiEA60yHHDDtX10bqo0fT1KVAh18/k6wuKt7Zha2OobH1KY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.7dd1a27d.0_1614636040167_0.8328634884039845"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12574572.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.12574572.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.12574572.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"043d9159945b812192eb864b33d16f892831b4d9","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-gu3zvQJjRi56YuhXZzrSxe11dmlb7hbwHmU/3ZvGTpmMMji9npUkb2qEBhxD+W7tXVMdLVBbqH5dcHdk7viLUw==","shasum":"4df3149a32986c03ea9867b4d397cb45b7536317","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.12574572.0.tgz","fileCount":13,"unpackedSize":57371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqAJCRA9TVsSAnZWagAABgQQAIWReRdRk2CAvi5WAAbl\nrHGLjETto9x56yBEO1arFtBbEnkKhNmyD3GePWvKzz3zwVnhJTizwaYoHykI\nEEoUc6xCa267QOvjjFr0db+C82VV+vXihCsBSi1WIj1swaAMjtROrMmKyGhc\nHxElS7X3Z1UMRuL2wk45HtC5X+fi3CtrWHYepFm/zx5E3KEZeOiHlh9aoLwN\nXK2mae59GfESQGvf3f7UA/aofgtFJ0Q84rful1iPhunIef6OjshbcYdYGz1N\nONKP3MWSuUryLbJLeuxWHyPfd68RBG2mI2JyPbb4s40vFils83ebW/c2GxD2\nRlvav63UlNqc5Z7bVoN17tc0e23qBbN0Xv3dV5zuKmjNoCl3L0yWvgCEgR9c\nEUB9w/dXKl3MHW+j1q7u786NMWFZYtw3CPLfSHjSgDu+EhgVJEKmVZIt3e/s\ngfCgsicslNNX4MDMq0tG2kbf3GVXRedaoxgqp6cL8LFkjOEl2m7XzhhAxVBt\nKNrbXDVmb9rBX6y0iaPcSVUnSsohBVItFXmz1J9U6iMdx1qoLfsaYUKw1VVm\nX/EyS+79tw8SKB/39oz8VEAfkJ7bswoKnoNMAFF7OsfZVFFs8vjgqTsaAd52\nx/i+n/nhD8s7QF6VddNdLooKPBnDPOPLXnyUmFpaplV7iqGq3YqaQbyhkt9v\n5BQf\r\n=cd63\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwynQ14EYQ1AMJ+3UsSiZmyZIcDVImOuXCxsIOxHA5WwIhAOzEnm8ihS5jdPrSUwLk0IzryfFRBl/bCWsFrqfXDLj2"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.12574572.0_1614716937291_0.15695865459613567"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.1109a3d3.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.1109a3d3.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.1109a3d3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"8cdd512cc62bfc703a1cc766d67d04509e4e0c08","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-ovfzphDSOJSnJGaD1wRUTwrpT39blf/beD2/2TmG7TWHSyEnqcLKVki7w1k+gGTgCHL1EKCQ4AaH0UKQI+HkyQ==","shasum":"6d4c934683f6fe9a1d035208734851188d3861c1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.1109a3d3.0.tgz","fileCount":13,"unpackedSize":57371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqElCRA9TVsSAnZWagAAYbIP/RyWeUHkfZkVtIiGe4Ea\nCjkw0QOeuygrXU1uBWnG2CmM32GhOd0/doe+nhLSoeCM5V/vmajlDueyJAAF\nLSqV5EE4Y1+7n7ihTP5bYnOdDt58u0FelBA9wiyuw1HAGlXPoDDEuluMj4gI\nUCVcJxE4cTPTmJ6CyNWG/aQwWq2g96VSffOOS0lC/joG87cv36BUxnT4g1Qs\nB337Z912EfR+AwEMFfVHp6D7CBcwgD7hAWTHHJ3BtTdJjdboO7nf3XlHf1Vp\n9ud2pAPTgaRC76dEUZGETw0AhU1QnWMfXdnyyFuEhs06F+Yttlf5E+xxQmYj\nb5Jo6IqaRW/u4p2zNj45Qyu6c/OZqdlczon3vgh410Ayqxq8OA0QAlDjf0D0\nD4oOyJbX9jCIQkDvV1oJxKgtmGfCbofIeYuIHZjQP7+sBrdSqVdbR//0yW8R\nMG+8Fa2DuU/AapyqrU2Kvvpg+ykBtVAH+G9Pwly2jfLAVJqa3ek1CCGOjv92\nBn35UU7tNft81uWkRimfbnLUSATsOe3PirxtKRlnQpCjOTigJnS8iED/C0w/\nomo2Np+J21dkW9frFytpNfFKSZXkaQ3XXPB3avrMNhv16jleKtxjDEY8xGEz\npAZF5CKzy5K00VkEqaY+cZJT5U4rNSIuDpq5PbX4s8f+w+oAXcZ/8qxSd1ee\nN67z\r\n=ZgTW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCw7bdtd2iGShCTlA9Kd5jLtO8hZ0JTS71uKu4xFUC8ZAIgC4WUK1WLickLSxihjnPUBAf9GJ42jgHIA1IO7SAqZZs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.1109a3d3.0_1614717220833_0.8129839573838047"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b9cd8739.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.b9cd8739.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.b9cd8739.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"89fe0448abab4c371af17b2866ec736d9ebd8cae","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-5lf3DNJ75X/esiODy5JzqLonRkJrzwnCsnU8QJEfMpHvgC+WJkjDnCLqkHh0ap82LZ5T7n2QNYQ7c19u5NkUXw==","shasum":"9b2b5d5f46ef6146d9d1e9f10235bcda5744b6b2","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.b9cd8739.0.tgz","fileCount":13,"unpackedSize":57371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8tbCRA9TVsSAnZWagAAlGsP/iWq0vDz47dW8sphv9KR\nDgACB4VEK/lkSeI62NJBO3dda3MRXVbMRpF2YGuFZ7MyESf73GXo4hQ9bO+4\n/elrw5bI6/udKVUhxosX48Fh++QOIX2QwqAOx4mirwixe4YTyLLIBeesypx/\ncq8TrBYjDdR6m7kF4ikvIWdN5oJbmVPg7sLaxSpNSeaTrX0l23za6lxSyM1/\nQ28+I/xFPHcrVxI/DZ+o3CPb8HYJdKo27nCtYQxCSiaQyUBHMqP/A5Ub0kRJ\nlcr8SU+2OR13k8DtXfbXk0ogqltT5mZWmZftWedy/e1HgZ9T0ZaM3mVz3VG3\noa1dCaVzPl1Sj8aRPto3MyRxNzuI50y2TVv/oOklvQYlJIHfeP2O0sUMPLal\ndbBAiEurZpeNN5a9PXmOEIMGXg9FzMyb7o/j7mjl5SBGbM8SW7AWqP1WUbqZ\nyQOxB0+IRPkXOQ5H7c+QFFvRmwdjESgQFqAUH4JtnIQrrANsqx4XIPZrgYOP\nmGsB+qQWlEpyIcluKgjsaOaCGEAcmhOuz3c0Vn7r6eVUxzhRX1Z+9b40dYFq\ngOk5McBdLO7MJtYfbxBo8pGc4gqBcUdjNuDHDW9u/DG34eXEY4zmKt1gJcGT\nQkoDeHrk1oc1dZvTm3gr/DkbKqCtaSk8RUYTq7Hb7Q0+qtsx2rVKsLmUnQDf\nOpFg\r\n=4fi9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICtjZV/fYJe1QgA2MDDcYTsyXPMpVOW7pHSqwwB2Z4m+AiBbYzQg8qWLvQ5MPdl57o3juKEZt0AwyUvlac5IDGCiCg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.b9cd8739.0_1614793563395_0.18574533484435074"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.71ee796a.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.71ee796a.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.71ee796a.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"d989f6470cdcdd144c7021a4eb0ea47e63945cc7","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-ZrcxdSqwJOrNnFOnxGqYLBcA9iGHYs1y9FBtdEHohmsWbJRANvqMJhPhOXK4Ud1QFbl/HhCwPqwRm0lbxn5p/A==","shasum":"8c5b69a051f12c284fc2b80b6c432a010d6be921","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.71ee796a.0.tgz","fileCount":13,"unpackedSize":57371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+0vCRA9TVsSAnZWagAAbiYP/Rrs/omtP1GphhCKzkcT\nqWwJ4L2zyLtdsPCsjK8+AKdufrXlbLBcvYhZ1ovNYWaIweXHD/MukUbcBFAV\nGZG+3EKhRvIYFo228ia89wTf8cbw3V7zvucuk0RbmfYlJ2dX+gj+rtZ80vbY\nSwWsfwKJjVtPeRA0eI87C6pHfkPHcMaxZ7sCjyhtjCeZ7AWr0yl/ggco6Xp2\nYguFwARd4TH9DzW90s5lCOy9jgpd+lkzJ2mSAsbPP5QbSn3vXwX1G1Tofk9w\nsmsr/3sRZui3R07eo4/5gFPo78GxNaTNnFXx6nsD5BNQR0meK3MgkWUpdFpf\nrqvJKiqCn6Rq1PD3yvgtmYAEcfLaEWP9/SYevGvIajeEtOIr9ujGrZwINcyK\nBU0RZCcLfPoLbVO4h6JwlexZmFE5k+7T0f0fxnOkTOOzN0Tk/IZJey9CDcWB\naqLJCreNdyAY2+/CAmA6T24brf+VBW6oRDuciAcOsMCYgSMY7vhKreYz/g6G\naeX7eeCXS0tYt1xJUqX+90VO4rSxcR5dNNen3KkrGnbC0XT4fVH+jetoTcgm\nKP02CX462O9zMIHJu76hFnBwMT4iP7emJL9fyAD8DsH9vQfTGyo5IFnTTqQa\nglbApJc5PAsN/KhNjkRSnK5DAv8BMOZEZrFuE82x4c/43FmTSLvCTLmvhknO\nuSnH\r\n=C2+o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4koIiAFmEBMQ+upmJ4ed29jmQaTRw2ZovMPXwtQTIWAIhAMEXnXtdnjAZnYqzArrfnVwm4Z8yOUpV/vT8iolrRU50"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.71ee796a.0_1614802223355_0.044784935439182716"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2be191ed.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.2be191ed.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.2be191ed.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e273563187c689092eb053c50fd9b94385380fb8","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-dmnQjm/MtUBCM2ATJUMY/fa4/Cj5vt1LyVgY8xtvs3XAZ3rsVoGNxboR1i9sox89EdKT7rfHUR1VwKo+W1aujQ==","shasum":"8096399b5ec07b9a5b006571038d14984d7bd8aa","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.2be191ed.0.tgz","fileCount":13,"unpackedSize":57371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQAS/CRA9TVsSAnZWagAAMrEP/2djnmjdsPYxJflaKzL+\ng3Fl5nCGyT6gHcN9S/Lmd/hSHehK3SCkjUxfYmsJfQ9ZVLXHa2sy+VvAm0rW\nilezFBiGlb1gPK8oQXGdCW9xz5ybU9cD91qS0b4q2lFpj/LL3ufWhJXXXw3D\nf4SwRu23vDt+ADfdqUWEnPzae45TWq0duplygK5T65B75BWSNx0yi/Nt9FYr\niP05tYa+5jST+N1vW5ALB3t2HOIyK4zhFsww5mWqh7VYmvf1/M5PilVWgGxB\nP+5T7aY1k7HimPrTSfYBojwzSTkKGlX/3VCYQ7CWT3mRvYlJNXAr+e6O5Z4b\nDOrnJHSQ+an1UHaaELxk5SecP3FNo9adP8vDOjVnrJ3IwJKLo/oT+c4pZ28K\nGooJeLCNiWYrRaEM1GRW0p5rKNL20pI7q9IozQCh6DEwbkhcLZ9YeMtylytj\neU57Jz34/zojcoK+aT0t7p/DinWVioUiFVnWauarQ+FkfBxbZG8/p6aghfq9\nCktjxsULiGGYqZ15/f8gRe1KMhTvhchcVQQbRM3Dry7YnTPBgweQ4f/yJbeB\n8VeorVi0rsQE2h3V5PilE/K/M8sIL4efkuuHb2m1ioEbC0LhywTueu8rF7Dh\nDEX5NwZROeTTdoNuvejxjbWixEQZ5eFVWDSyFVXv7r22HCDSl2rtF8mmnyKR\n+p0S\r\n=jchZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGLWES+YnronvPYAVGmeDs8RYJIIMgmS/JxmegLqfPttAiEAy8nLO1e4Gzf0aEFt/cf4MWR5nIr0kvaxySo1bo6Cq2E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.2be191ed.0_1614808254803_0.34007414197539343"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6dc7b06f.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.6dc7b06f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.6dc7b06f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"9a8a072daac91e9fc841e2f6cacc0fb753ada76a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-poQ3QgGLjyXdcnWCVeTOTRaBIO7pxsVB6k0iYcM4TR90+Agyj6uss3yYB+nrsWfaAH+Y+Smn8GHShPmP3vPXgg==","shasum":"ed4c61b076db9b31cc04a7f143c4df8b924f203a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.6dc7b06f.0.tgz","fileCount":13,"unpackedSize":57371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXmQCRA9TVsSAnZWagAAu38P/1TJx6wrt0446MbcUhPO\nRVxH0rU/EMYjE5aHQ/NdMcnsJdplK9ciJVoJfPSoGznvmmsuswnS4y03gE0I\nrG2k1wfGNgphNLUtRp1areV0TzfsWQelee9U89YEh5+QTn5yg75bL1z5FPip\nO+oUesEutKD0G2EyQjBjr5l4IO4mTM2gamCXS/F7csXCGMLdP/IG0MZu3OPS\nAv56Q5P8VV4eDkLyq87+dwdMd4fxA87Ys17xWkt4qr/JLncA+tmEAH2D0Tkz\n90aolXx03HJm9jhxHP8gVptt7O5hnrmwpR9/5kf8qNYbHyVly7tStrZhNR9M\n9O3QXdONN5AQyvz/3MvK/CmkrW5qCBybZR22sbjv6nR0CaUtU3a/ELd4Drh+\nIZzrIaoZdXg2POJGQspGZIycCLONH8br2+8tfROpNuRw13hXaD2yKnT7gLfS\nPWmXTQBC9bnRPwOf7fWHuTf6Ew6b6a4hvH51PowcP4dvWrexDNIuossyL6e8\nJrFaG8MBFA5kMVyyTmAG9wjJpMC7XVeEqu5WdA7VjjgMyO3S2WMVGWgf16PD\nM4+xAQpxU1oTm0TpBDFijghPV1JAD5GEXiEuaXvpV8vJopSMWSJNyGLUzUsa\n4zKQlVg7TD3ke8WMnxVRYPWlm2Pr7XnkRY94vxa4nkEVvYfODTp+Pj0Arhoa\n21bu\r\n=2ltk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEzENklUS+yMzqsmi9NlI1S2vgKk3e3EQ/pInPlCt56dAiBqQv/FBTsF8IZtW9yBz0LBFn4wVH5UBMktOd+Ply3X0Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.6dc7b06f.0_1614903696128_0.36405966233649134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.24fe7ba6.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.24fe7ba6.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.24fe7ba6.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"d87a6c320af38bd078f91bc9ea457c0e21cea9cd","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-JgM2f3ghhw68XwZGr773I6jy+XuzirG+D2V4nmoDIdeuok6fqVEbBzrtLZt4ZpY9alBzlIAfxsnqErenmKomWA==","shasum":"4395edb8cd0b74fe3fe4c60ba6992738ddc83376","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.24fe7ba6.0.tgz","fileCount":13,"unpackedSize":57371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmnQCRA9TVsSAnZWagAA2k4P/2hX4pISSPEJQ13Q9x0w\nK7Zgyw8TAWEMSOPKgC9qqgY9YEJ/kUPVGGce5GsAS3nbzTMvqFZOCj+mkRvB\n0S/HGaqbIoHtw3k6QXX6H+86Yni+nfHn9tTXAdtZx4mf9z9CvHvHYCf0FnH2\noFQ1y1So7cCq9wx0/h4XEjRrmW1PtXdUovWKfwx+OmkqzQk2RmeuPrGJbnu3\nLdb6MW1Wr8BCXkBTQBz1KDqUaXujJW7KPdmEHJ+Koi8TN+ExrZagLIQ/wKKP\n5++jSXwHGZpJSBMMX6acFxM+MFLv33Z2K4Vniw1l+OGF5kZJwwpLqQzNfvIB\n3Ik820eoAVR0f1dJvuGdfCUh/dNI8CjCxwWNeCwqLrSn3AYkCIUFzlX3I7S3\nVbenxt3MSZxbvWUwq/3fgdcRd2Gk/3eIyUb8e1rn7hHTNmqC2K3u52pADw8W\n6ub/epukG0GqIE0PsZHzUgJwRJ/P3n8yTRHFGBImJY7bclh1/pV6qWTwsvr/\n4/Wf+4sXRWthalcf18iSmTRqFGT/DyWtOsoiRva3Esgnc1S+HC8VHoCogkoj\nDgGQl1nTSHqakVcOwC8P8LK/c3fa9yt31dRevVxts7MSeEYFQfGk7DxnXz5A\nbECPw4LNgNthpuznWnJYFLTcvE7DXSf4P+dWBjgE4qTvArXk25r0HzcEo6EG\nVvt1\r\n=Myt2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoi9EizykuajX8QvA0OxCh6NimIFhGa91cN5sHLhegfwIhAKAsIKGm5S+s5zORAk0TZgOFyceJ3/aVMOZm1ti+eTnz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.24fe7ba6.0_1614965200046_0.48108386417296645"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12c477d1.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.12c477d1.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.12c477d1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"ea7731f325b77f7ec93ac77e442625ecf14e7f25","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-3XP4k2MV5ON6FhagkuYcMe9Hzk9loPqQjLaQGxBxODDmqK/r5D2LA0Ir1kV0zXp5MW64bTUT+uaoMlgiercTUg==","shasum":"9c95337fe020beeb7b8c383b3e6a3cd6ad8b3587","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.12c477d1.0.tgz","fileCount":13,"unpackedSize":57371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqPJCRA9TVsSAnZWagAABaEP/iLZxUlqaBJMiPnwJACN\nX5kcnKiDuMe+qNdjEVKHhCDj50y+s0mA+YjWpe/okreS9t3NAGvfMVG0/iFY\numY/tX6cX7rVlmdGTdQ9LxvKRi9DeIgd/9v5F7HfiRttR4VWwKXQxJ5BiaF6\nu8JPtz6aYX/ZkLBYwlIrdXZ26Jr2JLvDrARq+R6ZYq70hzfZs3NEcBgraexa\ndMsLg2Q9xZm3kCO36d6SB4effjHznsKejPzFg522tjUGV5imsoInS1MKyJXh\n4C0lhbMLwGXKLxOqMjp9v3bJDZCouAwnNPqmjKTDbooKt27FQTcI0RHNqO1j\nyTOQbidRRm+thouHIQ8CDG1PtwYwHnY2zcclVzVxVYlhRIP+stV2UH43X/sc\n2UG2Kogi6+djp1mxqDUdUJwkbeT8ZqawifnHgMpphL5tQrk9SIQSozT6SRoM\nWRlJ+0uaTg9NPOFqqYWwqThbdY5JWQHVDSd4Nhe8mILqjKF85Kndf/Lk2aKD\nHnH3gxd3pa1FbhZ1tZm5O3kNyFM0GaJda5LePJZBpBi4+qqX/QRidKTnp6t4\n4d65mdByNOhX35K74r7klZDisTGPRTcQq6Ldtjj+xGBfNkU/12hoGbCHNJa1\n62y2CnCl6nWkbqX/9GAsoixfjP5xzVwzsRfAH0NsV7apMIA66OcgVuWV5PRR\naAg6\r\n=Ouvk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjlScutr8B14X8efA1Gctcjf/d/XNu2e2ai32V9wA4CwIhALrj7PBEaSlfqypQ3P4rRlDej7d3wKDFvxnJNAdgRXxn"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.12c477d1.0_1615242185070_0.32937716825082286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4c38f801.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.4c38f801.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.4c38f801.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"2f19e904d6306b3a12d41b0158ca0c3fc34362db","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-w3K9Ec+xZwPVCBV1eC63XJSXK7jX4gpjZcBv7LFSa/lCb2aohOkVhDhcdXIAvI/R3U3Eas46zoCVh5Cs82EC+w==","shasum":"f4acb5ba1bba02dbc1f9f031e300d8ef81c5d638","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.4c38f801.0.tgz","fileCount":13,"unpackedSize":57371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrITCRA9TVsSAnZWagAAVBkP/ikS2yPAqyARwOB5qUQE\n1Wj2WwFR5gZ8kynlrpdtNhQtkfR+iZHhuZG3KrG4+SIuqhvHb+NAZmYa7GF1\n99SFeRv1J+4XTSI6WiHo3M5qiWWjUsAmX3y9SEXZ5aYlGoExXmVWqIi01Vvt\nPjn1vBcSmpOQ+Ik5MBBC+WFU9MZWufWNv7ZQ18Y4WuntdJFLRx/dsiRyAJoG\n0voUgfKxplgVcFKWRaB/HYCI4N9+5QhaHAvRieZnyX4BESTBiMCCmHPL89Dy\nNF2TssFMarasf2jcEGG7NMHv+ZRvXgRYYq0GofMcma8W5ludvZn4gtMesB58\n6HMjgKHhP+iQ16WL8lC7K8bN7T4wxTp/NiKyvC+9eAqv90E/OyyCDKnq4cgq\n7byimABiwBebRT5gi6fE4fVfTXqLJsAcvDlowVszfYaw82ZsI29RNgTRhEM4\nvEkwK/tXo+msHh2uICwWXJnc5RLI81fTbVWLLpamkQdKNS4jZR8/icNYuqRH\nk5EJs6EIO4imoeB7kmcuT8jeTc+WsPV5A8cN/BhzVbTFMjGwW5caCH/+oAc8\nZ80hwBskyt/C6Laj36hUXdP/EmzBq6jRsZuBiCF/bAoqSCrwrv1dgZC9G9R6\n08qD6FoYeT6JK5DuW1sL9FvlvRYuXNMmsp7xPYYt7tFwk3AT7cU2uF85hD73\nNAZ1\r\n=glJ9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCr7H++ux8BLqv9GJWkw+tZPcwLuLaZuGgqQ6N/DM0P1gIhAO9xnGSCO/NRhBYMwLH6s5BxmEsaA5rXzke0+YgAc0om"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.4c38f801.0_1615245842907_0.27470120964462685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8795b83f.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.8795b83f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.8795b83f.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e3e75af3d23a6f47c66e86d2168ac672364726c5","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ZawAkNLbZldKwWkPuRoOr9JX5GqT4jevQhgPe8HsIGl8JCW38nskbCIgYV3aQak6WkgO1KOiRPLlIOxdlfUidw==","shasum":"c21433575b9d311e7fa159ad21099371aa4cf178","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.8795b83f.0.tgz","fileCount":13,"unpackedSize":57371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR732CRA9TVsSAnZWagAA/u8P/A9OI1JpEvPZiXYCK35l\nD6si0uF+HnUD0QCWU9pPVwlEoknmDIxmy1vez/B9DOWEk1I5nPdiHRWsrKcv\nRSWnj+Qfzh1Mpbkt21KIA51tUbppcnkqrwrJrX26+pWqgPslyLCzUUaSXOSI\nfQ0s3mgEVCttxw7b5rldG7oFudO3MGsirgZYdurFkU9t6qpMbEwAs+ltU53d\nYN9dxuXaSjd0xTF7cU1w4OjWN/7L1A5AlrAjg06Ybra3o9gVpWrIR4Mm3bCt\nPPWkFHT//SQHcuV9AriJtBrBG/fO/1TlMpM/X3V58D8et+UL6qqNlxJNOMpn\nkYeWNqy5hpz1JS0VwRmNo7ALopxXmg4uhF9yZV+z7lygQX4mZD8+AtUPUbR0\nC9/sQcRSP0lZ5+r1QNU3so9ZHvwbRrsXvYX5wVumDMSK2F9QCU9loyZme47z\ndoxiyZuEs+aBl8IoKbAe4ySEXl/SiTatrJtAenyS7tuLdwWlJixHch6MDPNc\n15RGkf1gko9rLUpes/dvEGAajLNY3K7GIc1+OmVRDoTepVaz5Eup8A5HfdwF\nXagdxECy2YwSeVWqtzvaVQ91DVM7Yq9Sw01JaP71+vTyomD4p9bATJOJ6mEP\nGrjKE9MarTe4tAaHcm2PzI88VZjM1FCMoWSB9c3fFz8pIoKJr+MJzzwdxaoX\nanz5\r\n=o8nD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHK+NvhqxEXG1T97Z1xgidHSnHF+IPP7LzTStkWZDRMdAiA3Jc9QzlnQ3TmXCU8V/17M2LzM3aWBLrbJ/MdaRLnz4w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.8795b83f.0_1615314421519_0.8660607482703102"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12b84cb7.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.12b84cb7.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.12b84cb7.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-jQ51JvesTm64pGVqn57cA3c3dWYxJxM2jCPBzZqx0o0CWF+M+Gfm2e+gQZZjYP43+VXG7R2ZGB/wZg/maMaFyg==","shasum":"9d2cbe1be376f791c17718d499c85452ddeb6fe1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.12b84cb7.0.tgz","fileCount":13,"unpackedSize":57787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBWICRA9TVsSAnZWagAApmsP/2hSH333UbQ5KkLCFxYI\nAJcrvv1lWYie1SVQdnRDMT6YjCMMEQBo771GkMELAU2Ho7Xp8kPZhw2NRtAP\nOZuLpTePnjlfpXQtYVzcxTiaZWSrlAb/ldbcmxo+7/c8/EQZeftqhXbuzL6O\ndLc6SaWTG60kOsZyjh6kkFA9E5vu8qlitnROPl0BUOKs4Rw9kyhPXGdl9cXw\nNCqsrGNGzX1QeqwojJd9ed7Y3erXqVjKE2WtLjDA17ecdhP6bYRt8/wlq6nV\nuLjSlEHSTve+PTet502jT0NOyvMOm8lRkrJCUxfaFd5CGDzWz4+95xSOYokT\nwj1aLagWuqfvHEAjpUhdRY9xTJOnMHDsA7fKC0hd03eqtTgypJzkobKxU3SN\n0pL/V41BvA9Hl6aDZ8OJc/vLZbYErUI68kOYLRaEVycMKeWBhJyW7i7DKgPl\nyiZJ8bo9zPAcyZum/XyfpeKaPhJe075smxEEJzrnEpNehSbmo49r7odVwevC\nHb5o/mrQOtCMT1n1Lsf1bJumqcxxh4gH5QJCfF9S4OjkV2xQMsaksHoOc/wj\noMkNZ671eLdxPe9HfOcQttCNl/E4ISaVqVyFZljz4vT5ptguLCPp2eJt5C8x\n/YUUgdgSpwwpRvE/hCXvEXMo25abn+yd3mu0hZ6/RLaypgfcIKlmvQJRXvrl\nbqyZ\r\n=TWB3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAsltT/m7kb6UTxTMZ+ASxmIh+ckES82FaEGPJmCBGzxAiEAr1zAxNLC+Ix7TaRm2BWJh+lFrYMOpJlOk6tNOla81eI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.12b84cb7.0_1615336839817_0.5065593540538276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6ac6784b.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.6ac6784b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.6ac6784b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"c60d8f8df8e8260f94f9e15fccf93afc356b0634","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-w2Cb66nGjNs5MP38dEndODBpWcmgHMqa7Fl2Yoy3I9O6yjkbkP44PQn9PLGeg6Du9MxWIpDLDCgUtGHyqN168w==","shasum":"1df0ae26d7d31d2b41e9c0d29eea3b424aad3841","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.6ac6784b.0.tgz","fileCount":13,"unpackedSize":57787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBfgCRA9TVsSAnZWagAAigsQAIpIYRXUPN69CwRBGzdL\njjWrL4PvNCIId/g255qBPT6mW+8ln7Te0JSdqtk30aW7cCQCXe0NUvBvomAM\nYgK3xDPyheNXTueHsgAsFU2oYGOurFA3V2mXvL3h2TTC+i9apeTec/lr87vZ\nzmRdxaxlXpQKH0xxEHpO/gP6FROwMtZtaEHcEo7k1wwfpjXEzX5CzeQfx6ZR\nbonnconF9L1Lm0X6KUChNHPv1Ko+QGgs4MNpDQLwUvv/JyH0udiLf59psl98\nlcpfkyPoBje8DHo5J/nTHj3s5UXvFMPD/dFkF42WImu/Z2Ktv6ACvGTdy09A\nEFvXdVWUFJnDYZrEtcm35ljdW4SRb9/7ssyAcppPsS7AVKub8jKKAEjZCYWT\no+8CuziYNhz7KZbBSujTxZ0K711rHjCGtTVww7WLxFqHIKJ14f6gkutKq+Y8\ntgFgR+4WQZ1DqhkGN+wgjAE/KT134alf/GRMPlJ8USPGMh1oh2dNZ03iy2kM\neWBoGEEybMavujQCTVxADtiCZzxza3IaWWMvnkRx31ZkKhoPXw3VMFT60FkJ\nsnpNODJv8EYbf3KTOSt40P/LE90XJocUC7w28+xNBoIGPiR9rx0/aEx5vscR\nJw7NHUX8yWvz9zgp60db6RAjXnIMdz9U5V2JvSzo0IxkqKNMkq18r1fRdqzQ\nKcKO\r\n=CmH7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBwtszoFeOJvp0OjkVKURotiqx42+mIFxsFhl4yc4NMAIhAPWnWabnh/sDWq3A2a9d2Z6rjnCS6CsqXzuV/KPhjg0N"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.6ac6784b.0_1615337440585_0.45474216091324293"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b6d92934.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.b6d92934.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.b6d92934.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"82c48b7f335ed9103a3bbcd062d3163b1eb661a1","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ArhqQsfs4kLJK4rbDy+axf4meujLg5Sc3kwE4VdlnpmhcYsNVa4v6BIXvAQseSa42gOt5IBtV4A9RsbNeyRw3A==","shasum":"c28bcb28844426863fc36da71cbab42ea926b24a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.b6d92934.0.tgz","fileCount":13,"unpackedSize":57787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUF3CRA9TVsSAnZWagAAH/8P/1fKhCAML71gQrAJna+w\nwDOJDHjJt866rIx9xWA+X5moJHE2AzPCEzGakZiVNdvc0VeJvgh2wzTqp2LF\nz44zNQpLPHs4K33vBwmtwZn+FwGSyVy4LgPDpmzyVELLXAw9effxa0gI9mx4\n1QtyLrDXX9mPjlx6dfVtt2phETM3zOyr0jjNmIh7Wt+ZbVEuXsd6+Lpzw9+h\nZIZ2lBeT378VHx8O9dugEJIr8dAke1vxQByDr6XJQbz0SvFHZahBTmyS4LGm\nWli/9LlhQrD7Qt6GIr/KXgKO5r4Lmj3qd3DXTe7rhlG/2AeNM+uapq4gBwbx\nxYaiCq592iVxqbekpOiQDTsFq4KBcaKT5PgPz9JB98XTwLNxBXIj0YBqrKhi\nZ8JgPQrQPnw3lVDLn3ReqR405FEgGs/iOC0CuOE7yHViqsIZ3jnVa96jrpu1\nSWFVm6Sje4qdJfiNl9yfLkhH3eavuh4EGl5Nv+gBimmxuG0RIlr4X7mBxciy\nnRDc0cMI1ZLFYnbM5MlZVKTVs9N5gCmFk9QXMH/Kw0bXA+otqm46qihLuQUN\nazGKRS4VtMZtPoCKDz9jXeJ0gwCIuqljNFx/xjKRkmq+J8GpKo3bLbUQjRHA\n2RoQnlwKkeRY6+Q9dfPRF6mI6CSLkuPl2ALyAjk4RHfNFk6cD3sDN6b45/bL\n8W3G\r\n=7AYn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUtNY/YtO1dLiv6IRKrEl2snk4MUui6L2Q1WGE5muWBAIgP3Cq/4xUC7kn3AoscLxok05JqrUYcbO/QlEeXtezFbc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.b6d92934.0_1615413623430_0.4229835335722778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.99a55b9e.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.99a55b9e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.99a55b9e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"8b0d740e8ff12f180cf11caa9a264f3dda6542f7","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-CxA3L979sgAaNiBaGynncpQhOQAzrDjtoyzelSgRmRp6/nNdTbWg7Lfhu+qgF0BzIeUOGIeE3mhfhCzCojbWow==","shasum":"aa614f4ca0b9d013852c2a142bd26af386b05b35","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.99a55b9e.0.tgz","fileCount":13,"unpackedSize":57787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU1jCRA9TVsSAnZWagAAwBYP/jUX1BPpE8u5arHrQ0+B\n/xV2QlwTF8mQrPytMG7VCG83Jes1amu0W5C43TosMhyvNf7HVXbFYOutG3jt\nC6YXAZ+bdGQsgQevt8RImrVBJo8cyf18vjfmkzj2mKUckYz2Snrbx4zph0GX\n+0vyZ5mwJRh3xgcDqCv/nntC3RERSjth2PHFe5d0dPyEVApwQtAd7ZDZWeRx\nh+D/+fne+uvuUu/bayVkMaKnQdvxHQqP2mxPYro9c8+VTzRLny5mHnbLRUaH\nORrobRpC3g3YYiisbMpw/FI+d/sYuUHYT3GJAJblrtiuBfcwtNuJ7cFxsQra\nvfksUWXL3aYgsrWsrSWtxXye9SEduAE+ZF9L6eRJcIZkakRMliVwTpv6u1ML\nkZwy9dwZdnwCmia5A/zOgl98PNKPj8xn4pxH+paYSi3qn84wcPztWimzjU/a\nR56NxDR8FVmRExWk64QdhDkC/3j6kcmca9OsQOKw+UQWksb4QvF4QYbX/ZGZ\nbC8ohjIVjG9+0gQ3Ny/04hO65gogGZ8Adtn9AHpgNyF56WAMtTKBhj78FYV0\nAFK+ywiniu6qUJ+1NfO2IW/fE4vySh0c8vZaVIzST6+UOl6QlKT21dHo2sDC\nD83gUGFY1cgHL7ma6ZHMdTBtMRs9HeaWkwc3c3bVKWoYcuGxZZcZUdS8OTcX\nfOr0\r\n=y9DT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLyAbcNYqVUwtsAP65ugv4XSkDjkIZakhQw3khLbMMsAIhAJYx52gHkmqulxA/oS6Ni/MpORL3jBsp4CQKmJvQrptK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.99a55b9e.0_1615416674910_0.45392760946535304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb14efb7.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.bb14efb7.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.bb14efb7.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"00644005f58173e15c7e271bc9c226535d1bbbc7","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-UGKWW/XdcUXH7E23UejwrCke5iFZKTu1sDJIP18o7s/jThBWIu0b//OsQ2JaU7WEVcA+f/ePY4qrCBo1v1Lb3w==","shasum":"27c5d1380bc78e4838070d6e872085472a1e7050","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.bb14efb7.0.tgz","fileCount":13,"unpackedSize":57787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVgQCRA9TVsSAnZWagAAsiAQAIOx5weSYWBDbG1IJzTF\noArqjJ52cESrWs5+NoQ9RPuhTG6hmCnD6xlK/WLskv1KRR18lDSu+uHfoNac\nTrgHZuKzjvOh+HDwjvDMPZI0br/9Q9Ai9K0bVpgC9ifYunHXzkxP8BPAxYsK\nLI/d2i4rUokLFoYl0QjoYHAM9Ku5zUeaYaWOu0unDAwmOfWVFJK67sASsDEg\nUfMi4H/hnjgbucTvd6bG6bOYSiJyTNg9Edg1jTpvc1kIOYa7P/+mLpLZ5VrC\n4dskLTFrNOrk8oHLcHsacgLAgTJRdE+ys7wgxlkl3ARmvUevUSohFAWkxsyz\nmzhSWfNjcJC/+bAgQfbOKrPcmKfjKDZoWOOyHTAZCiO0tLB/aiAYSnD9lx9I\n58nYjHgMuLbwus9sWfqblTglgM13dvp/6j9wi53KCSkYYN2+UoNmHX1SUSfm\nM3nVrfuRPbPHKjwXcvLEXqEWiiaulhUqc7YUpSC0JFZq5Vl8bFtqUHJoStl5\ne/CqghTn2zfdWQDgrCK5AEoZ0xHqlSOimkZ0dJN+V+g9JcybZoyE4yKwJMkl\nlPFfwO6wkS9qIUnTubekhpf7sWrkVt74EHkuHRTF/Nx2KzUCpZxuTzOyFQfd\nd++scloizZRlCa/A+p6mnrzfTHe9udPLURummiBszSi5PtGFowvmArV5G9lj\nrEw3\r\n=Eyc8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzvZn9w3HYj/f1ae0HcK905049wyaRJZNKR4hp1vpZjgIhAJojlhl8pzf8aDmuv8jhEf2OUttDRa9RNyvKdoKUIIJj"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.bb14efb7.0_1615419408172_0.5552205495053109"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ecf3bdd.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.9ecf3bdd.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.9ecf3bdd.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"536269b5f421223a32dd73271ba878cee3e04ec0","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-f2UJfUq0TXTEmdCpnOr/RZiiN1aAbjeMBbYZruKprx2YmfBkpYuslD+gM8ujdsglNUP9kfaJtcJ9V5UCshqQmg==","shasum":"bf816ccbce9c0b9c87193c4414450ea766c9f847","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":13,"unpackedSize":57787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWLYCRA9TVsSAnZWagAA0yMP/jARxMTZQl2BVpeE58jX\nM8ja+Z61RX8rCtN00RjFoGvWHsKURFnXGXw7hO5LSRFhqRKvElEFP63AUkBD\nI939CYpL8xUDfVlHXlFvntJ89yEV5IGw1Sncd5fTyJ6iE7U3Tt1mfngTjISc\nJioFeXw6zPVEDfycTOkePF6CaJpTyP6Zngx87Un2ykyp0r54gfdQJdRpml7H\n4twSt6OPjEulaJU+flgM0eMMi2CQPIAsHMpqoIS6DJtfEj7GC/HgiFCTGI83\nRGz8zgzuKwaBGjLibn/UEZQy7KpK7Bj5uubsf5lVtuRbkx7TITT9nWKNuaAq\niqiIy7tLoVAEGwZRmlMZpv4OBlxhzDuqzt31PlW2rJcRG9KawX1G6pbNs9he\nndpSWS+m8lA40d9IkV9LVAnw2Htw9Uo5vn7xH28iCW5VQvN0LrtWPvF8TMP0\nR3imTgv4jBWswmizbv4/QAsX00fEzbDDxu/Da31pV5k+nK2X3yr1r0JcqxyX\nCcUWfkoxo34v5ePYt0digX3HJdd6S4Zh9XTU05XF6gV7uQjl5neIjsGiDjfI\nSiw/iLR9c3L/Uu8DEfnADdca1J2nmTWR0XJSQgl++NXMl9/70/eJodMS8Mpf\nJOlGfit+H6fLAiVFpgTQdqsFMu3K12JJlO0vcCNMHiKy1xVfxNrfUJCPNONU\n23yT\r\n=W99y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEpJjHp7EW7aExIBIg1APRS0I5t+14/E3ElhMwhlICLAIhAOmy0JcTZvXl3eAjBa5am7Vy+gPWmArdUexSXojCuJq0"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.9ecf3bdd.0_1615422167823_0.14249932549535083"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7c0e02fd.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.7c0e02fd.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.7c0e02fd.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"96acba80bdfa05054613c4753b3c0211e2ac7a76","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-0Lj/8vs2xO+ydKg1qj0IwoO0IzoXZNumWmKB8rYx3VP2SZ6yHWN9H/+WbN6AfWaGMGiSso7yElP9+3LhSxuWWg==","shasum":"520c113e0fbf7782cc0c0afaa7c0d288b33afa1a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.7c0e02fd.0.tgz","fileCount":13,"unpackedSize":57787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXZlCRA9TVsSAnZWagAAww0P/3HQdU4U3Tqerx9bxZi5\n+gOJkw6yNDgXrMgV3katiUrw2z7T0I56z6c1GIv+v7+jMh9kSoZnr75Mb/bq\n9MvmZSvztkE678pnG1tMIk89GBD0XlMgok2zEfaLbeoDSyNlTg17/nA+OBT7\ni+ziIao0oZslLiLyTlLyjN6MDFHpPTU0TdAptlAaek2PPTYzf8yvt5TaZga2\n9Vfya+JjTo7QbLULxUiv2eKWb/sFfxhPCOg8V+kKa9I2zXoBe1VHmQRCi/6Q\nqS3bOOWkDppru7PzJmSBec06ON2et2Knk3Vz7j7/YntbgK4inG9QkGmyLVtk\nfmBT7gZp9g5WU/0c1NApdV3QGkcGaEDfuDktva49iFz6ylNuiTlwcnjY2fK0\nA7afFz77pobZokRU9wRBmWbmVU6gRpb8IKqjpbJ2rmhXDik2sNVxdFTs6WUV\nAXfLybzaZbeinpJGlx/B2nRrFdLjZeclescB8ZMLfLB52dU3MQLeTH/L8zPI\nLzny6DOyu3FpkcZRG25jKlDQSoT/9/enDBuSbC/clSiY/hRwsOBi36oD1KZC\nR19i5jUUukBLmC7sx2OHCkCzmUmHvCuYqOi7vMphJlw4eFlE20cInCE6Ey16\nmK3+mOEY6YTOG4AtHBgF3EBqiLaOKzJFz28d/6KHFon0PmQXsFtli27gJRdd\nSJbL\r\n=BrI6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDp3XSUOt4cJkCmnXzgy1Elvy/8iIVIMncsVCfU/7iNkwIgem9vvNm3nhYIex8k5M7sqYGQogO+hPhIh1Vi7WKM5nM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.7c0e02fd.0_1615427173453_0.08680624506236256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d6d59cc.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.2d6d59cc.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.2d6d59cc.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"52ad91ef80e9719962d213826d84928a37cf809b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-I8KpTNd5mB/2HBkMx9BIX4U26E77AB/BJzJ0zW0TphTEanMQHsY6JfLx1xQ23vE7ZsST7o0B7d6aYlaej2V06w==","shasum":"df07519f848c46598ff3ed2635ad2ed1c9e3f8ab","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.2d6d59cc.0.tgz","fileCount":13,"unpackedSize":57787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmFgCRA9TVsSAnZWagAA/MAP/jd5Qqdsy/TyCtmJGMJy\nVwoVsxwFls7b1vAnEks7flHpTN5x9jXtFWefluRBFb7dS2BMV0vJ9oSLQRUD\nC+qH8yYoNc5fZVRHrG9Yn6tR78+TEh0dPYvu01JMNyzIQePp0BIVjbVAf7o/\nYr0CaGCjt3BwdLDJsP+q57Truiyfm+2QTk3EwGECKenJSlVawQKuy9KkwTY/\n80AHhZE+WBcIGGecKFrtcbow7LA8uGfth+JEz2h19fRPzGYZ192+IRg0vnxV\nDF6WJQfWuRbPjuCMB792KAbEYXgOI9pfrlScXh1dHQ8wUHeXHjQ+DOlztHYl\naYdvBOZLUd57Q2UMorOZK4iyjuiZwyKtMPVkStfsPYShpF/Ye2U5rVkhuV17\nbn7EpDaMygk972+PTkdqeFSkzOyUooMtnUA15M+1oMnMKKNCaznhfLJ8y5nw\nsQdKmS24mSvoMUuuhxo403xCAmrmQinqSuTWz+SjX3DFgVb/GQEz8rC5E4E7\nVEgBSPOTvfPrn40TAeFebQ0iTevslWjhzHmhjH6jCu+dlkh2XwsI80w3ys28\nBCKa0mF85CbTR7H8d02wQBDmsLUMcaibe+CaQbunbghBdLfBUt+aersL5Ei5\n0u+PjyrP34UcAYIhDhu518L8nCHzI9vdE/oE2J1ITs05MXl8LTrN8IuzZNqF\nzx9X\r\n=RQkR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJuNQ5Rt7MgdigJ9osqaYffEKkvt0zbGMrqOEBrrSbTwIhAPlXA4396i/jwAwKgFEVjQw+VStp+SUzaZlc63aQX4Ge"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.2d6d59cc.0_1615487328317_0.9596492934111442"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0138863c.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.0138863c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.0138863c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"851518435241b4315820e91765f5b26a5537c63f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/PneoZyccY2kTcVfz1SzY+NDcIpIuhdWNl5IjOf6DWAzH5IQSF4k71/9dP+qHYcGvcOvN20sHNsQNSJnd+DNuQ==","shasum":"7ca6a04d93a1c53a19b7936bd3e8e4eff63b0499","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.0138863c.0.tgz","fileCount":13,"unpackedSize":57787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmMeCRA9TVsSAnZWagAATocQAIZjxio/IXSfqrihzz8c\njCuMnSk4sJjcBLMiXQDMrU8sVxuDiMjNXS6Be9T2+lOz5kJkH9NyXIxqDBj1\n/2Cu60/C1kKtOVHpyPWJ+0f5JtsqGrKWFzm6Pbrn/4GJBxhrwtTZ9g5AhdXu\nCPY3a5ua1yGYaFwrqp2Ukgxg0JIRZIrVndLem/sgjSXJZz7zIIJr3w8aL/aM\nwOhaxdAfIIkbhxqtdINmsgYNVy2OyGYdg7q/oi6F5kcGu0tYZCBuPUxbcjCF\noN6U0Ox5Ge80LlbDH+v6Sc9coWWKhYAocDaM8mV7Sz36CQVzBZio0JJtF4xu\nKL/tcKAIgBp0cLapfu09ga2y9tj0PhEgXnt4zz82nMn8YSC1i+BVbwkLj2fs\nQiH1snufK5HsJxfHC0wRL6uzQTrPnLUcaVENdx0c6ARVYq7jUxAt/RZgVmvj\nhARDkIv4p/eVyDTpLWlguhTkCNybj2fWvLwT5rC/vkcUPc13PSoyMhh1vWZp\n7a+6y4x1WXYZaLYpFK8lq0DrdvNodtZW+zhlaihZeYh5XGA64taUMhcFkk9V\nq2qWTXiNmc9NiTLH4mg+sdpctIEVWeuWxbMoIcAngycTI9rW0zl+wH3a6OM3\n0IwxxQsDAEGU3DRi2NB+qjqfOZ5yZGCY2upNNzdmK2WrTTdJhhlB2A4xFnAx\nj0r0\r\n=+ya7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcT9ElCtr+JebWrl9fduQPf7APMazYa/GZZO3s5msMygIhAJlKZMpcdsFeFkPzeIAfRc9evW8/YfAKrQl/aMkdsq2E"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.0138863c.0_1615487773583_0.42518562433497387"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.926f5bad.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.926f5bad.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.926f5bad.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"516a00bc24de904c4782b3d5f4f0d285b7fd1d3c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-QlYXfvkpYRis8wbQpOQBheq2ONwkP7ZABSjZtfn5VyXJ3T32EMIqmQVvfqCdADoZD3O6l+D2dEZdKqocvk5RHQ==","shasum":"e9a1d3b6d9bb16bc2f5cee55811434bb8228de7b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.926f5bad.0.tgz","fileCount":13,"unpackedSize":57787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnsICRA9TVsSAnZWagAA4GQQAJYPXGa5/9TTVd0H57Xm\n9qMJFaUGBDnlkWy0ya57EIkidvYrxO42VTbXcQHN/NapkWGMehhjMcVtSy7y\nkuF6MMENa3PmxTIsJegBxfjJIcVH1i4bO58GTPeG1xvG9qrakIMVAdo7s4d/\nDUb/qohbHdh676ijF8sSAB9kv1ydzrX485iSv8E8tYaojrRSXAD1syfm9L91\naJyES/kZa0WsmwlASH3tEQscUyFNNgjG2iIgiq9eNaFq7tqLN9reexk5Z4GW\nI6g3QA52zi7JOqgGwK2W/OWkzzu/5784MByIo84aH/w347auCq2bXkghB3Ea\nJVOax6tganGNGG81XQWafi0lasw4B441Aq17XtnnY6CAaP+RN9LnZ8kw3Ziv\nFpmc0kGke68bBND3ya14KDlBOlk/8ZKiiOEB638x1qdke7/SHvQ0nOZhvg61\nDe8Csem26Ic6v5wHUgjvevUlTK/yjL7Pj/qaZQvEraAgb5so2BmOOWUUxyJy\nctR8Camsx2+rqr7OVtNN/ML9FK+7AmrET+bSh1iWVeHPaXe32LKpK1xMuECY\nqS5Oa4AkHRCWF7iyQqwAmMjsrAML5vJaI60ZydHVXjlGF0fcJxwVzIw/Jehv\notZ4TIjkbrMj0o/FStCPe5KWFWUviCd17pWECeKM0jlScRroljqkbGfSH3+S\nXffg\r\n=7TwL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGqPqO6jfSR53ZyICx08lbxOVdg32ZsgJE9yBv+ZCBKDAiEArDVn4oFpq2j3K0Boc02B+x3G04mvKmpjJhMxEikJPAI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.926f5bad.0_1615493896356_0.7185489183145322"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.520290a9.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.520290a9.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.520290a9.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"9817154a83b0101256b341e18843332e354f6c08","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Rq42X+PGkv9zm8efRNGPWSpYDHRJmqOZ45dIF2buXOMoR4mVZ6CDG3Wd4rlnQuZKHRiKAsR0THlkkhUSWSY7iw==","shasum":"e1b67e8ad8955c6a3fbc31cc5a33ed82d30b1bdd","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.520290a9.0.tgz","fileCount":13,"unpackedSize":58051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSplTCRA9TVsSAnZWagAA2coP/ibXq7aC3E14q2MSLEP1\n37jcqoE61LYQfoFXTgKZu52qy6TEuI47hBweHlYK2MQDKZvsKtMMeo7oW6Rt\nKUDr4cgqO1H8wMen0hBurN8gRZEx1QjqjIJvYPWgLgcMohYRWufn6mHyWThe\nsMW/GpH0cWRd3da8rtioXpSdYjMykhTamZ/OaKb9XQJD2wmH5tpxTGv6j7UM\nfy0RUrvFwPXa4oVqT3k/xlpwmTJX3yl5Wfi8J6MXDyB3H/MQCxB8+XQMn80u\nNRuuDHN3K+WcNL7hN4zoTlloI8YMxWxVwsQCKezWXv24+lRg11npoRqG04L+\nh0ky/udl6lQTEy36o+267322KVuxdKlWS82GZofkGgG5V6mcyr+ZHytpLQIL\netEX9QImEBivPC9Q7ndFImOBJEJZnZE1s/eZ4V4c16hLJUVVIYF8y11xWxdG\nEMOnmCVU8MUyKdVQkGAd66n9PSI6XjOXFMDXjgdqp5wuaa4+rNy/ByDL/JvU\nFkNhXwaJKHd9bmsWsFrLzrsIVeCwU0Lu+CF1sKOREdx+1+HzI/t1c74Y4H2u\nH0uvw4ndfFr0uLtn7xVNWgZDALWkzBzvGWz9Lq+ocPj5or0rZAOwpXcbJIs5\nAm7Xni3Fenl1jRMvAmXT3/GmdtVJSPFf+SxntOcYOmmqJRwDnzlllhlZPeba\nO7Ci\r\n=Yb6+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE0AYAL3Wp3iNcjtd9dzyh94yS/kfrpZL4z63nPXwTrBAiEA19qTV6LOnpsQaI+Qlhagy4HLVCkUiGPDxrpPVjLuh9U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.520290a9.0_1615501650604_0.509270174421655"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ec431d1.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.9ec431d1.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.9ec431d1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"d7159bb385f7dc7e6077615de2e9bd441747fdc2","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-9kXgYITJbrmtIV4kEVFuNkiskkitncuVBslvZKeebiqHATWeaiEMLa0iZzrccyWC6uCtiGv4QSAcOUM0CgLwwA==","shasum":"6eae39e1c7fd193e8d2e020d09fa41f7060f487f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.9ec431d1.0.tgz","fileCount":13,"unpackedSize":58051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSppVCRA9TVsSAnZWagAAtNkP/13JvBE+KEZnqQJFq+gd\nHi6o3rkNNgpDZv2oPgKGb9nONnP6gx/2/EkmoQpo8Z6qM4vjU9Ma6Jl9qyHP\nVsPEgDJUbvKMZ2ZudcjkTh2lF3FbR1KJOM2JF/9VD6CxAfMvOp/00Lz8dBKL\ns3JJojHdO3Mp2QC9QQ7j0r7YuiwJZDnXj/unhZWy6uhBe9LQpg1O/sKk4C6G\nORZxSxFbP2nMGPuYRw4J8lvh45Ha+6vsx/SyAynl5NtJ4H/fYALobiYXDh4S\nczrPBhL5Uu/2HDrEPO7YyKDXaR3efwdRRfUT7jmaVcNsFNKumq65KjhxsMa3\ndQPs49JOYQfrcMEEcb5oyAB6S4VMPuBOdufspl9FUAqJ1EFaXyjK5WQd0MW3\n62g1Bv/WSCG/eKnFLsfeRkXGGB66WypvX7IqEWj52ngXPxaBzq4wGtEx62gs\nsINlwDksqXqXDHIT4PZTBuk2vOdg148h3vQAUcf9LCHD0ncI/Ctupw2mRSim\n607FVrS5qME2vQ3j8sZRECrKi9QtnX0ZF6z1ZgyhpJ7K9WAtM8FbqW9lG1Yd\n0xoc9Yy5WsJoR/GqE/OzN/L9dGeqQtbbbiGYck5uRiz+/Xm63uQ5HqNb9XCu\nSrtBWhiJXMmiHZ49oXqFlYssA+FoxrkIQFmQYESozCYM+JtKIiiPrbUpEUVr\n3KQ7\r\n=LqNk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7wmifSzs7j7W15jt6KD/2k2fbo0t9caxu5iGVvk64cAIgIPaAaCRtFtTvEIXNRK0vJxoYxXynXIOVemp7Z6LUKOc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.9ec431d1.0_1615501908636_0.90028782597618"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4246c082.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.4246c082.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.4246c082.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"571cad0df3b7d77ca4f17d7248d6115fb50b756b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-c1BkArWqRANqh2mtH5ahNd864lJbGTHUFmPhe9zv670tYLZ0FM1NGigyEwA/hVDXQvVAU3W1X4LcdpSz4H+57w==","shasum":"5b2daf424a79b4dd34c4b683ec955624c4a569e5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.4246c082.0.tgz","fileCount":13,"unpackedSize":58051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpv+CRA9TVsSAnZWagAAfVQQAI6k2WdQQ10R7X65tZeE\nkCaDRYFExNghTCyV2mzj+ernXgk1oFxW522VLWsGBTmIVO5YjMJQDI7kDDWh\nihaXqlYVAeSV2H88ZU4DmWUHOAEw5NOrahps4mZ9vNHJUdEaFGER9We3TKAP\nys9x4l8pXLNIxHtQgjrEXNoPU6OCvS3kRHEggR4FbMPpCW8aiI8lDV4jVbcI\nLw5HPJsmlkwS/YnMtoTacNG4fTo0Oso6eGm3Xi7v8yVxlZvaW5ABbF0H4dr5\nz1hZpEmlyXE1CkqinackC/GdCM7BHiR4ky4JBuladvvo0MCjbFgBaB5TNihY\n2/qsHxc0Op6XIIrh9147nOSM15CBcGP/e2KmTZJ0ckeMIjZWOMLHz2hLuA0Z\nutMAT0cO0dTueQLPmb1T6IW2ukvkzvATOiVDFhL1NaQS9JLy4RNYsa/1PhsY\ne7BjDb4OdrEZTTfPs9Cdj3XOJGH8V58CoJABlzpC9j+tf+AdFDzjb2WHO0gO\n6YoDAMPmzS5f+O0wT8tYL8LNCHF0Sc+Hx0HEieVb95dtjaGoqpjOrQAhhp2j\nvhm6LXBVd8MX8yK0XyPwdIltaWt85t0uLX2AEF/VMH5OTr4QUw7cIEIupYhp\ntlh2MJurGxvAOOfK5FgPTjgt4amwYWmPeTZQ4kQqSQiVrwxnr04lgxmj9xH+\no9kS\r\n=tmX1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGHhfGG38v+oK813SZAJD1qZI7UcVKiBSXy8PokrjyNOAiAsmvnMdl2RiPOxRH/xVSTS5teTa0sfBIZAzGsngGFjOw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.4246c082.0_1615502332663_0.5079811198837736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d736253.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.2d736253.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.2d736253.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"4d8c53039218a8da7cc5199162317802bf01f7a6","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-rcxwq2KJONz0/tnRlOwz8D/ePssF/rn1bYew1MIoYdpkFRQqre1iLKe0rKY6j/VPSOESFiM5oZ1wks+DXNTobw==","shasum":"a54638c75d359d47cfd086af36e5baec36abd46d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.2d736253.0.tgz","fileCount":13,"unpackedSize":58051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+EoCRA9TVsSAnZWagAA1AYQAJryxRGdNn66Z7kotAPF\nYa7x/R/GlJLVx8BP8egTS7IteG+fHDTgrJWaRNtnZSGA4CKgg9lE6PcVxHbw\nkyjGtP7oi0LkyIoQKu6jMQk4TS0O6AUbbSPD+s16OXRrcnPfYQllGf09PcEv\nse4PNkUp7EX/qYhK2yzrIbK8aQAkoYg5NG8RYQ57SG4mMAfgX7IkgxHkhYXo\nqUUcum5PhEHzAKs5d2oi6mmYue9dtlPvIg27k3Lgy4pqQ0QEiE+k0kRD5/c0\nRS61aa0icn703A9LdtqmEnGEWpB/X9py4NnvGQJpkDu1BSoAQQOTDu1liuUy\nk4jOgN7tWPeRYx4AQ/tk2oKJX/Q8Y6kQNNVDua0RMRr8QiOgcjF5vV6Jt0p0\npUAYWc3l/odVMcG0nKOAMaO9uT/FGGp+xrCbNAfK3mFSgNVcM9kBlnbxqr57\nwGDs+y/x4JH+rDTwfwaB2KRHON2aUNWxYgjpyWCNOVuSe/KehuJazCQ2cTVe\nVRLYsqJaZYYw3LMCMHF0LiQZKfsE6P2+ogwTyDbLAB0qdOsp5249WaGv6wPU\nvixL22NmcsJKeOqOkyzdQUSYcI9i6l2xxhed0ku8g7bJphMzE52ZKxJe91Nu\nkAGydHNSd5DC6bvyIpWzxcXG5PeFeSL1RCRZfYg9YvHylsUD7nRV7NvzkqQT\nTSwB\r\n=Z0yW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhwMpeuKkIG4Qwc45zSRLqR5kT14rWxVXPBH0CQIlLVgIgFkfOnfHbDg5kFW1Bg1ro+fieUQUGE4G5yrM2/fcccjU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.2d736253.0_1615847720288_0.7774979091717995"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7033124d.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.7033124d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.7033124d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"7797af96dedeb3641f0889f0ae67bc02a1ff2332","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-MHxdpMqIF7YRwK7V2Gova/gtVxE47nbaCeyNywej9ZJHnK0CqNikXFbaMPc/rJ6xOd9ec1JrwxMh9T4k4svZWA==","shasum":"a7bbcf78851f68da9b063790f097d59c86dd7853","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.7033124d.0.tgz","fileCount":13,"unpackedSize":58051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPrSCRA9TVsSAnZWagAAdDQP/i4E68drNwohfpbvVuE0\nRdKyT0anBqdtHcuYiFD2hHaNDoSJwlCgclvxgZgiDT5tTwTEKXHTytiDSnan\nEuciZwrUgKKjyG9L/fRZaBE39R6XGk2fdbsySIcFwo3UZ2xek3/2itlDJ5Wc\nVMkh8hAI8RkD/OUfWbewDWEoyG3FmiHaIXX3eckEtteolrX6E0gcNH/vjB9F\nIYgR4aKXbFoIsK+DxwLwTp6djzQQ2OQNyPwN6eMP4noW6OtO6wnvR8LMcgd2\nsBn9gG5eveHiPNQm3EOJcYojfhtj4J8OIi/Uvj7fmP8gJm8S8xeVOdfXX1Md\n6DHs2HYcUiw/piBXMfAkfNh8J+SZa+A36ZSXVVNE/gxqk7q6g7TtJfebk6t3\ng3pZWvtUrIQEMxBlAxDtlrOaqOHV/bLR+9sMvJiZxJ4TbQacZo9FKa4rdOes\nm7bOwP+ZYMHWal0qq4N31L67ku018tq/4zaIY24ec1ikZXfksMLbeLL6vCbt\nmFjvqARD/6G4cBBGOeaINJaja5sS/YEW8v1jUuLSO2FJ02utuP1GoDfPJlUP\n5yAxUp5u/fv5CjcvNE+tU210Nnhk/MzWG/GpSHfwLTz+HtZ82DW5A6pEBbA9\nG7cX/O1wSe8mBtNL7GCSUUQLtx2/7a3+lakkSuBTFZPGdtlg8cQ26G8dPHmG\n8pae\r\n=xqJS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICuXWva4dQRRzySuapEk2ph4kkd1nVw+9p8ErIy1U/GSAiAmHf2vwozn1wKRP/t7eKCiFnBqJRQr/4yBnPB5cC6iDg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.7033124d.0_1615919825911_0.2003738258335328"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6c0ee901.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.6c0ee901.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.6c0ee901.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"d7894da96b1452ae771bb3096b993e3f51ce8adc","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ntuZKiI1TwCv/13x9QPmMry3L/3oDaTvwABmtojG6LvPgYWKPA78qs0eFER+hgWX8UptwzCDgnen4JKBTOdvoQ==","shasum":"4e65e98b136901f4b13ab05b412346b6992dd04a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.6c0ee901.0.tgz","fileCount":13,"unpackedSize":58051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTNpCRA9TVsSAnZWagAAnkYP/3fqBdaY2I0EZD7fYy8z\nCogP9RQZSLsuXz1s8JencQAdjqKqkl2y/FgE8GGb0OfV01gJPXAY2mYecEvk\ncPZVr6DZQYI5+dW6IOxpR+FaxfanWgXO34aSQXFvHiBah+iRL2g/anX4qmzk\n6KODBBsfpVmIRDlE7LFzP+Ndq/a1QZwgYMzilpelZl1LTbxhaTr05P79Swmv\nn7xHwNW1qQzF5kJwfDy/o1wPsMMdAXXTfoS7HmyN5jeRkOZFY008Y6lzH+OX\nCSaZ9Cn/zn/Co27ZjCdiqUF+p7QgGkDmD3V6zdZqb6dX8V/olSPZeNqp/p8G\n0p4HZEazHBQrvCsCTW8XLoavolK9s/LxEanjQ5+s7HCWIbQWJaO922jb70iY\nCz0iQDesVhmdEsId5eXCRBp5/HEP6wHgSvtnrhwhPIPBA7+9LT6NOLq+A04g\nvnK7OKVtgtEq75fGyummVkWCcgQuwTYWeND1r2imqTejS/qQvyxNzmeQGWfo\nC8IMJn4Ym/JofJ5Yi8SUgBcwhlS6M4tMMMBx48qdDpB/dgX1f05/XO/4aX5K\nL0Xtt0MX7ZzbOM78ZAWc1ZNxEblYtOO9FnHPQt6tgSn/tgdWwshfXaHjhzWv\nSduvPKjiuGCcCK6MZIbhVV85EoojQtiprMrPJe0/WGlbGb1Fy10ythpzT06r\n+8YS\r\n=a+xZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAW+DsVXrLbNjbAdktQONdmY52qTQDGJSQqUecN/ZyI1AiAN+pICvwLgsi1Sfl2ugomEsaW0rp4bRn2VcI2ry1qmVQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.6c0ee901.0_1615934313004_0.6831682378037209"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7f0d605e.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.7f0d605e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.7f0d605e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"77ccd00da9f68d22de2494a2aa4f35b0da375669","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-v+cmxQA2pcFmdssBXOoyGejKcixWoqReVyYmPonEjflwuOU3jytf0oLmbdwCiKD6lR93xwWH+H/JcF1C5C7BQw==","shasum":"256253040af7a6bd135600d3df4ccd506cb39ce3","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.7f0d605e.0.tgz","fileCount":13,"unpackedSize":58051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkSWCRA9TVsSAnZWagAAEjYP+gLs8fdyyBIQDiagfMrH\nYgvhmJFlyQhkABbpJf4BFVkcuWBP/CumMtDpa2Ou2jbLY+6XkhBg/2IIcLq3\nZK511RlF625GV9QRrcixougwyVDNvGLGb5ygOlL2VnAk81MHe3y6LlZHHtoD\n0XbVwvJ+HNtjoesDbuHRjqNwg8Ht0zPNIN91fFIzyAhxTFwFPmjjpKNzqH2k\nLq/T4QN1lK6qi8TD1PzEKqoZ5ojvXg0Xr6Lnb4jawvs3vwRDa3fOJV9TyGe9\ncVERAXEDl8HQYhGzkztiFENh113hDkXweO3vuJIaKU0jK6A/vi3/XCH3Zi00\nhMSNJFFqEqY0G/Q0CzJ+Txk4ou0FZb+qloVEZPn63vKlkVkrt4Fqz0om+d76\nkXyKcX9VqOO/b0d5r+Temt0+NZyJvuc/Be/ayzveywaUDTa2MgRWbTduCBQc\nQcMOq9IaZJbD7DOJzTe1/cRelzIgMTBcz3Dv/PubFQMhXwS9nffToPGTfkPp\nW9YYuWOZYhihF2GYvVRAts7ml3BRUPDat46Iv6Lkz9bTOXHgN2/SfDYCy/6s\nGtO23/HacXtjhMLTWe7CPOTIqj98uI/HFK+x69V+IiTMWuSjZPbctSc6dGbO\niAiMw8b3sg5W8AceD3VXVYlwoLtXbN9YLTo1diNS8Cgv0IJgk7PCNlZtUrsd\nDe1a\r\n=3/Hn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDdCYcKRgiS4dBUh3pxJ+F37Xz2ewCa4Y1m7KW7VGHa8AiBMcX9CSmUNVmq+5pmmRyPuPivlL/qAXKXz8/eGqHhppg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.7f0d605e.0_1616004245570_0.5309496512830905"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.572107b5.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.572107b5.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.572107b5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"9399ecfdfc3b2f0153e16b3970555c1351c9ea81","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Ycd7BeFqw9VaXI/ZC/NztNtyRapw6VPkz5uemYl0LxZ9TyGQC2rRTlWnn8YBDYinIjxrf8uRaMT4OztRpSZISA==","shasum":"35352ed4973e297cedc932860b18d60e50ed7fd8","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.572107b5.0.tgz","fileCount":13,"unpackedSize":58051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+gNCRA9TVsSAnZWagAAtQQP/A6vnzIjn7OHhUsd6o0f\na8DoH3fqqZYL+gK6YW2YMrfGaHNMqWs5w/441061yawITkXzQMcosPjDChlj\np9lPO4UzfGwemya1+shsiF6LK44o3JMdLCMwgR1KUU6KtKAWPxG4pPK9C3Lh\nWS+2LQMj2oVL5pWI+cvXkuzVTKjRRDaiVbcik9RYH9K4BZoXxUyotnjCK6xH\n5RU+XhzUU86gKfA9sgs+ypR6biUkrRxtIBs31Hxs6SNBfmBySkaFFxDFus8x\nEXhsR3IbookDz00dnGsn38ozUl+WNri7eNAiITRfRF2eww7Gx+Qvv1FJhCu/\nyUkEnNXezOBGGNwyvVOyHAqEYAbgp4CpmXrg/gxCze5xmsIfT76+nG6SiMi8\ns0U7804Pg//Dsk2CxAkK2suhWl+sjJjTmlUO1iFzoOmfl4uonzlAf1Aof77p\n9iIAEN983FJAVdfPjWuMp6WirwtQVPoFJpYWBlXeDW0GZA7Hu5pWjV/5i0Bf\nEpaGUNeBm/xZ+RuTtk94JmhI1j9iP2UXEmSG30fcy5h+wIaHrwztsIsD7mcp\nIAuzfFERujRrUjk85pGaUDryDwWN88/+7yBoOG/Trvf4XtP6e2GSJ7XmR4tx\nrK3CcejwuQr0iuMa6m98WltGGE3UXrmAFiDlSHd4ZRrU3z8Ca4EyJPCgVudD\nzuzz\r\n=hzS6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVXzrb0pbQK6OQ2F9eh704h/mItTS5z0UE0xtZNqVsAgIhAJuJF0+YQD6J1PwAAE1/tZBGQvlILZVXqWdSmz5Z1U4G"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.572107b5.0_1616111628702_0.9813322887945077"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7b220b1.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.b7b220b1.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.b7b220b1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"23f87dc3afa9f7b0599f9673a9f27f15d9751f3a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-LYe2sxjXrvjckeD5Zd6kkYCAWqkT+CXlGxJ1q6vvk4Rh+FZMy5/UCVgY6A2gFM1i+PdMFolenKs66wbzzHV9IA==","shasum":"e052ebb988aa6241104d43fa3358abf4fad224d7","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.b7b220b1.0.tgz","fileCount":13,"unpackedSize":58051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+4XCRA9TVsSAnZWagAAthsP/2/PwD9Za/54haKBr/jB\ncrt0ijk7cwWRV1dauigq4jPiIXbfqdZLVvYuAj++Nb+faadVrspkqv+EQ0nP\nbl/grnkcB6Jk8TcKdAG2vp9LvuVCyWh7SzK2M/hN6PNBBSydI8DJbykuDDTY\nLijIR4zJ4Gzrq8Vq9B/yC9t2IuMG0ZeGbhS/98jgTlM/IXcDSiuN+qG2Ck74\nCBFsgvC/U1XFxi3tPEM/Jyy3jXqEEZm1Dk5V/5FSDYTjXA4niespOrdGWqLK\npyI3IjHaKJHH0PzRZEAcNsBy7GmJzI8XCRxz83OLpbCcHrPEYXnfDhmpMDCx\nENFB+hEPa8W6//gFM0+21ZCYCtrohGOBQPr/kyFFB/AY/jv9Sqb9X2gi+NF3\nHZwPOiwTNd9N2S5BM8qx/lYN0/TmIaIm1p4Irtd50dn1P2KsCvrwQu838HGK\ndj/TmGU77VRlziZyuPWiF3ZfZEdw7YY2byP1h8XHz672/fOMyWQy4Rn+wW9C\nslqUEr7kL3+O7e0pa0zSEh0EXj7Pd6SFFkWJhWJ4vYAb88oTnh9gCpDpU5Pc\nWo/CCVkHpbapSuisYzN2cHVP5bwVAcPd3TZCbnDBWcOFSV2Qcox5O3gnbMvF\nLnvPVnlu2MtOWrVzlpSR3xeINX3mi0NfTNWLENLKjAS+Y1heN9gNzXn8ZFAO\neJt3\r\n=yyNg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICmRRpUayWsG9glBOEXcv1TZHwWcZA++VZwzgf3wMrSfAiEA+wiouuE0zNJs7NqeEaZvUMptkEo733+Elt7G9ux0/Gc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.b7b220b1.0_1616113175071_0.54664063406683"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.233b2de7.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.233b2de7.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.233b2de7.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"6887e9dd977fe57d5199416b097952ea056e78c6","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-HdU3bPbpYdJgbQA7HC3RtXyBShDnrzCncbdGrtIsmMM15M/3EdJL3633SRhpY1LkDrZD8mnpMWeQCFFlw2Y9YA==","shasum":"f18e0f35ee7ce4016601e6513b38066abf342373","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.233b2de7.0.tgz","fileCount":13,"unpackedSize":58051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO2GCRA9TVsSAnZWagAAazwP/3+xxo5mWYC4UkKc+S2Q\nhf0CrYcxWRb/ga3+xmCI3sFL2Ae6BNZGI4CyJ3HLSCHH6+S0BSIeDpF6uAb+\negBevjpOtRM6EbJt6oXR6rKmx4UB0npQT7B8rOvk2QXjl88BH0QNbmYSTsG9\npc3rA7/aayUDj+vnL2GjXiW+WSru8MlHnOzZZrQQQ+ZNsPnc1HnnJPWmN58I\ntLUrgA1801bHw5WuMwhcknAJrkMf+nguyBOzkWjngE2JX85vECpQZuxLii4O\nxt9PEXJCDCJuAMlCLy4Yc0tNGUJi7JsMjE930sJMcGRK3Ac63DMcswKt2W+l\nSW5ibJcTF3jm4VjW3zA/w5494V7d59RHh9bztYWveNUsAEkWJgegZmM470b3\nrLkTNko0oebuadfqc8CzpasCH5OpEENAHZezKXcZC+1Q7/coH5sfFaeW/hUm\nBbMDGSmgl9ZGdVEaV4lbLxlF4kFwro7ip3RmysdOc3qd5FIrxfaDToCMAyuI\nmosOQ9/e4K3LLERa1l+acYhRYHyNU5lSbOgvp4oaCwF7jNGDeQldSEav3C89\nx5mGWw2s6YeoOa9TZG4g3cmnm+StQo1YI/abAhJ8bO0MYX98v9yQ9j477APZ\nMZtxgY6z1mbsq6DTlgxv1b9VjL1Z5lEi3bZ/VfTr477z4vTZ9Lbj+NrCXv4c\nMYMe\r\n=tMz/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEOavX/O22KZSAlh39zeVgcXQkBORkITt0JdBcOC5yZsAiBr0RCrTRLbzXlowHaIw63l9FcwMmb8r9WOaHO0MTx66w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.233b2de7.0_1616178566249_0.10512115497025842"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1a2d97.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.0c1a2d97.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.0c1a2d97.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"d341fb857369610d763723d28d8c9955cc461de4","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-2muI7uqeHaLypPDOizC5pxqBL4XPqAS12WJNw7qaTu8QYx0x7w5UJTfm36zx9NiZBCVr4LTgeHtEaw6q3iKTpw==","shasum":"5a87c6f73bc21546705d8108b710cdbf82f3dd9f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.0c1a2d97.0.tgz","fileCount":13,"unpackedSize":58051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRWwCRA9TVsSAnZWagAAA18P/jqFovoA0N9tYpGGeKpo\nVm0BPdOBbtp/9JuohiH1aZ5C0XltGJ/6YVZEQ1HFbVxXJp5wauJdp1VYzq+R\npavyu2QWIK2InWnSNMOIgO2wUMxtj7CgrMyOhgQZkpufUgMTxdAOzIB9MDPI\nT6Rps7l9BAJw3l0GTjkzm7JhgbzNY7ickrFkAuvjeVToODORt4xSJfNM9C+8\nTBxLOquA1IPhyg1DRfA/uHntp/KS4A7ZVBtfehnCM8ns0CUZjjGsD4pHAchE\n8YTz/7Ag+SrI951p10wVjrB6bOjf/6ykmSgNSOMbyK1Bc3DuX1N45WtXowa5\n1s/UiXESkzKzx7GEzdILOxcAwB22So5FopvjX5vYR9YOdlnJEzUSNdVTGw4a\nRInNK1Scvi2dyyyVI5zW2QsgeOBmxjk9Cp15a1NO8ewSNFfeM9ogfn434u92\nmj68hIeSLM/0M96BEXF2l+PpG8jr0M9Z0O2oxUlUoW/oiTRvsP/mpa2UP4oa\niczQw6uxgS7cKvIHLojj5nQofMc5Y3bzyWtLwti9O2SIQ4ktd9JYXwIiFF/q\n3uDzK1q1xpu0zaTOGPwoPN7EuWcrmvs/Rx1D1vOoHQeZpFWsciQYJ0ERevDH\na7NyT6Nu3NXufdqKNir32M3AHfOsTOX775WBCcikSe1cLH790eDTMQaz933D\nfX6i\r\n=SHjF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCT3Ane0ik7IpxVuExHerq8ailHaref22u2p12A7PqhuQIhAMdjQllGd1KXvGiXc6AW+b4AMtrrtRYmSKNTDR7mdokb"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.0c1a2d97.0_1616188848252_0.46124121154544273"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.57ca2e73.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.57ca2e73.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.5f0fc444a.0","@material/mwc-base":"0.21.0-canary.57ca2e73.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.5f0fc444a.0"},"publishConfig":{"access":"public"},"gitHead":"aa86345a10da02c5166fca78e72e367ebeb95677","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-vWpt503MnGlikvOBDAAeuUNhNAX1w5os1TvpwT1oLkDtq+TCCaliOGiWRmez3AGlt2uob3wKp8/zAC9qz7nJqw==","shasum":"9a65a87141eca6d266fa45084ccd4f6d0d850dc2","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.57ca2e73.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVShYCRA9TVsSAnZWagAA8e8P/3q3R0QAKXO7Tb0o7qji\nyznXIUwXJjI069Yxq7+6p0qmZbL12Kolk2j2RyMRFX/7jVHnDtrcUDbNBHIp\nYyup0+wYlIk7tAieZLQzuXp24A0No6kGOOOBagukzBuUkqe4+kle1UHZYrEB\nSReyz0dyRUGkq5jGOkrQHHBcIX2LwVNEuT2EZLHHOzeAAGJZ8E53jiITIM4L\nSZXeDLK77QHZvy+tGnJ017Qwwr9Hhf9TQDwNnRuUzDz2Tov5JEmOM0O/l/kx\nTfd/r5DxkwHwM+Ht51bQNzh8OjXwxhJjbnGeJ7dP6k35b6RLlhGEpx5+9hrV\nCtlr2zPy7Oi9/X1FW80Z4KeDrylMO3yaRDumuWziUdcfDFkVlA3JVi2JkY1I\n421Xl71QdEd2cTTwf6w1snLSnYKhmXSNIWEBLlTGQ90aJKeo3MpLABMCQUbx\ne0EPplXvfWUPURUBUHF0Spt5gAzN3voU/7WMJKyCpcBSP5wh0iOA4EnA12iJ\n8JFkWyC5WXZiKSfzpR1SaBZguxEyAk0Neqh0z1IK6CFtL9img9rE5VM7V2hJ\nqXfsIcolfLUkxtlRRVIX0UsUGyk0Pcv3129xYhbmYU59kk4hv+B763dQB2i1\n8tVIVXa06ctqVxli9swdigJZTna6I/0TIjeGQdeaYCGSmYpCe09293OXvSiR\nLc4n\r\n=CDGz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG2zhIUIpZquRNeRJ4iQhJyiFIeNBHL53IMLEE1/Y/hYAiEAos79P7SiN3Psh3EemSkrid3KcNS0BJ7fh5U1x7qRAKo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.57ca2e73.0_1616193624033_0.7600997146155328"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5c058f4b.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.5c058f4b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.8943b991f.0","@material/mwc-base":"0.21.0-canary.5c058f4b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.8943b991f.0"},"publishConfig":{"access":"public"},"gitHead":"6a50e9efec728fe20024c0ac52645387b1485f08","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ariMHtfK/uMciS4CKZLjfj3Tiem9Pcod7jeNMWlG4uM95tJm47OaNrIhBsgobW+SN0zzCGpJ1iH3vZYVdRor+w==","shasum":"51b8144e8be0238307ac0a98c669e924ec82b59d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.5c058f4b.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnTUCRA9TVsSAnZWagAAisEP/2lrb8onCwsDr3oFZ1Y5\nPLoIemBSOR3O4tcx45fUDSypoJ/+VwPQWj7psahL86n2KicX+aJPwB5klGlP\nIdIDNbwsF4Nas1P8B9Un9ON3FpvZOw/5SBKeluhlgAmwyNvH4aaLM6Faa3ah\nMimlz6jIOomjGzfDrdK+IPaeKalyTs/oOtZ+agTdgtbxrKPZ/qVIamjahqA0\nAwsdQtJgAaIfkrev8b6ZK9OO4eAIXP1QjFW7ODaRdnqjB0V7fLqYcXChIBZF\nT99+jOH6JSxm0RXn1lks9Qyr937jvBvF8LPwpWX5Bc4zyq2yQ/nuDfM3ERKs\nEFyWxlEVYXMSE378jluw8XafwuEzVkhik+qifgwXrqJE8KdDm4mIJE21G/Mx\nPi/60laUVRr+7Eqi3v8318dn85NFjIxe/JA9GiUXXa4ZUo1YlYlP/N1aqvtj\nuZCdvbCM67bbl0xfKlX+1cUVxIsJtW27KpRg4GdEfcdgjAJk38cff8txZMra\nnXpuGLll5r4kjcGGLfmd7dHOQ397S8nZbtPC2bQFpKqMJQ80DIJnwxuQfIII\nAtJXT6EioDH86ICeKBcDapKz+8mJTyujelB0d9ndSBt6RRoY0nohVk0f+u5d\nlop1QFWToba5JFli8Mlvzx0Pu1HFli43RItZUfsCiMwAKN0VXXPp23yO1o+4\nYN7B\r\n=v6ID\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHOCeNJfiZiXPZQM4KGTBk0iytdMaB5eLpoiZCiDYC9xAiEA907XZk1YTxpiEDJ5DyuwBkPjSQiW+RmuvCwMgXHGQ+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-drawer_0.21.0-canary.5c058f4b.0_1616540884504_0.319585464708926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e27ef7cd.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.e27ef7cd.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.e27ef7cd.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"7631d1b220323112ce72141784e75c8356ca0f88","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-0UdJTERTMm/2H6uBKFfKXDytXy78aON9OpmGle1HZw8q9msIjuQ8o3lw+e4NuJMeEpLQamiRW1aJAxBdlk1N6Q==","shasum":"9f11019e8899cf215bd0b392a9ad8c0ea8e2096c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.e27ef7cd.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4XPCRA9TVsSAnZWagAAobAP/jAE7nUZZIuB3VEwBJF6\nPKnd4WRFT3sYt3eKplxv4LEt2c4vjfl4IfvBzh/r7+SAbGR7DkXrIbcS4nez\nKOepoaeTXg+LEKzKil+rUNp8ixdeklL6xTsNg5FI3k1QBfSAY9Ugk3hHA4ml\nTW0t0U+kfKP1fo2o3m4Vh7X50D4Y8d/uezIm2Lt+yRCQiQjvw9nyYwlY3SDe\ni52ke0y16VP1ewHcJ1uSWZQ9bIcOYJAL1Sb/h3fBBzFYf6ORLZsWmrCjTA3u\nVkMnM9xPNhmoI8KZKwe3RI3IAMhDTvjKX28FpO8w3Fv7tbH6L/xVMySTwuq9\nbtAxVcs/gfBGWs7HKHWhzOPdSX5xzAh/pAa3aHsMHPXx6JaJsruGhWyZgUTB\nwkuwlekBooXehHxCum3jW9VkLSiLEDkMrYaaHwyEbFklKp6BgNFugkWF0c+i\n9xhTOda/u2I3SptI1OxgrKGEIG1KjpCGsazRaRdCwfbfDtgAoCxrdGWNljme\n4DCIK4ZujhLWA+7g7yQY3gpGczBMtRTvfohQ4s76UMLE5LWgbBc2p6bqq/F3\n8rUJvgTef/ISDW8a5Qe9wzsVZ/iyMvjLSCYZriQz3ZfwfoQRUaYn5bWIw7fG\nF5MSR6Eyu4j13sjKjfhVGR6wgKgiNNDZYGS43TVDF9XmxyLOmPpsppm1bDv+\nPfL1\r\n=v3i1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPFoa6kApeGqlzSde+s22QtXy3xpWHgNn19ivPqG8ulgIgH/dsNq9SFgeSnDD/Jm0nz9khtXivrlJKlGwKmWOtSKY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.e27ef7cd.0_1617135054567_0.7748450275247063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.15c09e74.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.15c09e74.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.15c09e74.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"6f3ebc4bb5f04f139f9cc24061e00f418b04ae88","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-S+zJL0ef6s/cBHhYICFvNYaOPbrCV6Qhl683HRKzOot/211bpV36BpCUvu3/MR1QFFtJ/mQg3x1uve0fGaUFEg==","shasum":"523bfebbcfa5e77031fed09aac687ad5ffefa703","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.15c09e74.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKePCRA9TVsSAnZWagAAiQ0P/2bVs4MAorYE2qgnXdfh\nup/YObt3wzC9x4YoMc0j3wOtEflJg0sU/DXSnp0g3q2qkWOcpoEuYZNDnLHs\n7ewAEQAIdo/M3ZU3gRaj7FABCDLHrBT49QUbJgAw+rJQVxsalOHgCgH+Xd1s\n+AEqIJVsVoEwtNT7g8qsSwBZ0o1zqCXrr/KUi2//aDu8Er+0eQ8QNl/9C9wH\nwu3sOkh6NLtCfWDDepEUPwAmiqCrgn3r+vaG/E+tcY1QAXvhdZEOa0+bydiH\nncF2tcSKsAixkui00gKcbuakiGO/8vakTxQO9IYJTFf0VwBQWtDhGRSAOX6h\nYlK/zoagpuNLYocPkXEYurQtiSRrNkzig+tMCwEewuyWwWmo2Zf4S8T1aSck\nZOYhldJbHoajg+ir3Xk9s4/rteCCzmZTMkgc46cobjmB43463knXg+KTgFn6\nruTE3ELz/VQmkbLOjUNOX9vg5LeigJuiGimAn1jZREYTw9Tr1zX+dz4GQXpQ\no0RLsN6G0zLRjAdlW9tnEk7NUZy6IMwiPzMn3m/Hf+QFLmkxYH/hzov0I3Uy\nYk25vfuvoexwHG7kin/HsADcM5xzAI2nDmY+Dd3gZYTJrApOQdYkttcGifrO\nF05yAvH2VrhGAUOvVLpp5SAQXOnWQ9TFrZt2AZAg5wu78YaLz4o9eI1cx3yT\nweR1\r\n=Cmax\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVCkPGUwmPh4Nffuh4I3jmG2VrSErCPkmPkSyyzsCH9QIhAJ5uyvf+FzYizUbXAsVIo2KBK1RZjJLfWm+PXYqjazHA"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.15c09e74.0_1617209231246_0.4727383101747611"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4dc32be3.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.4dc32be3.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.4dc32be3.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"1f71c032815f456f2ddbee58c9b175e65da3c18a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-IdkxRbBWIZO3eNdPyF1tK4M6wsZdfJLCoJVoOne1G3+5/OKTUSgoDXuvhKEZI1pTAXAIwBul64jOjS2UGcIvYg==","shasum":"1e0e9aff0cf1c4fc96573919a2a1c096a263faa5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.4dc32be3.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQoiCRA9TVsSAnZWagAAVb8P/A8qq4zXslRfNMhauSKx\nQJxc+tH3/csWLUObpAu6DnwbpKJBUXAtmQXNkK93x1PADMGb8oJCbL5jUy1r\n6Kh3MRmIH7MYBKxFBFwB2bIhkX83BnTXiTsih+MVr3k4G8ZI8XT9/tw+Ytvx\no8yZn3BUksO04J1t/C/vnNM0NRkEwAVLnPLLNPC9G1yr6DMBv1XuDgRqccD9\n1l7KhUKsco4y5oxJ7Mbu/IaCtkzFdeevdZpih4kJL/c+ISvxGV6dLRhkD4KB\neQqM1l2C4OcAiz0+fiXp9uF5OwENNGrRt6fK7/lzeDh3tWyymp2c3UjsOUOO\nX4GQHrsEVblITBw4zL35HfW0ovPE6mxdeP938t3RHXZ1GOIx5rM5XWDTwH1+\ntE5UMSyWHhu/aZlRy3BEKHYmQLln0wlWK9lvZkUJXNY4lQ6trPArebgHayfZ\n6LN1ejCt7CJdjZ+rFAJdTuAqDnC05odmBdWxys8lahdmJEtDvDwOG86in7VP\nVh+toiNFL7O6xiAA5zY1235NmEHX9M5Ncce4l3A4TCHDR1QM7q9kzrGRTGc4\n+uN1OYEjgYjcAlXlc6WZA8vdeVs2eeCuG8RlAkAUn8z4kX/oNWRcTSv80aDM\nEDbWU7ZJPKHsQNyWnBz28WclEQTqzL8eCAMc3J3yhEIe6SRYkz9PmzDPX3b3\ntz+n\r\n=psLK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxB4rouDiaiShNypW7zWNYYdgIiSF+6voSoxjcpOakegIhAJ5nPmjpqyLchjA6uTsahojpKj0opRqsBqhknOdCuvw1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.4dc32be3.0_1617234465729_0.18452888608070528"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4b717f65.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.4b717f65.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4b717f65.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"a7b21246791a74b1ae4e57975b1f4a394ad9cba4","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-vdV+J18C6e84aghb66NVfh+LYmEOo/Lo5B/6RiCsp5R3aJ3RNq7C0JMLdyIQgvrxkrPpuQ7/fLFylYm+OnmOqA==","shasum":"73b873a632c5fcb8e489dfe29b2c36d571c6a9e4","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.4b717f65.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg1ZCRA9TVsSAnZWagAAetYP/112Es/CMWERIumf8Tuu\nPk9nO226hfjyjT0EOsn1genbbnVQtYcK1dwqkv2nsMVjQ0/mMoMUDeq8UBbC\nqXPQ7ORtljxSM2C70qslB9JdXrWWHYhE/Az1wO0qIy+bIJJKSsLUkzRwEEDX\nphJOp7Xd4kxHYfZRKf8FpTwVGD7M39gFvsR9bHW7M908yYUTdxhF92GjacdC\nHg7WiVwN4N3uf+7jma9tc9vUkJEMXeQE9S1NTB57xlOttMfbZ2GGjMiErHF+\nnvenpGD6mjiA9mugbp0Kpnt88wDVCr4euUM0H6+RwLM5HGipsh65mB0E3MNb\nQBiWyggpjuoc7T5zmoi1w2bLZzGUt1tN7lwN6hJLVDhhfQkDA0Oi2wLA3fMm\ndBGHQW+GwVdWe+UvUe1WGaCiFJ1jJTC5j8BeS/mzFdBVDazezi9Hj3zWrFT8\nj9OS7uwpF+8CoVSvwioN5AHQk+JrcaxtiKoLe5966C4K+NNvOlsjFI7D5+Hj\nAOY460y3QYv2BzzmPnGQCYohhSIxatE63c1hXheJwcFYer9RFpNkjuQFhECO\nAMfsTkG5NKlzrBb2ifYNoaVodbzuUZmhit0g5PbLrvOxMYVcQ7HQ3xsaIGII\nm0beefA6hWmoJnqK+sXWR0yP8eQ/FsxxqhMVFd+aR2+ebou6NNM7mFvFgb1+\nZ8++\r\n=WxQe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUM+4iiZ19gPAPR3V7qJeO3oEB450dJc/BF1sE42fsaQIgEB6trxVFX3mqOaDR8H1f6z7gzuL8mK81uUbRy2Mc6Xk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.4b717f65.0_1617300825225_0.4067654593891856"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c6870f20.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.c6870f20.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c6870f20.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"5808fd48fe9ee3cfe17f631aa6addaaa847cea19","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-WHtyAUAKsiVSq0FYD7cbKVeyOHVQ5/AyzJzU+tIXaoYC9pTuCseuqbKti72OjzbsIWvERQmKwTbYn2lT5vThqA==","shasum":"59bd86b8ace1d27cfdc1f43a1f163503dbf33a44","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.c6870f20.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZlorCRA9TVsSAnZWagAAZEIP/j76CCgkTGN2CAbZXJXF\nPEaeexSUBBSPU9AGZZdpyPLbTLvLFr7BNMlutDm+CmYMyq2OBPOkbsZA4IKV\nfV1iLNufKC47sgcPZzdENp/bIUZCYkFwCrcHykTz75dhgGQsdP7+nCihvTBz\nHtoCw1inX6lpC72JLlAFo6p+SZtMrsrgMJ4LHL2tZUImMn5RfBOYYOB0YMqD\nmTY8hZMMtKwVn+XOohxV0UlFDA6wO8QXCpnqT9j8A8C/DnevKMw5sCjtjmCu\nxQ0l7UdeBsx5j4RybxHl7ciaEtfWrO6cCES5vH5pJehD3JH6xhiWKLgG4/AH\ntXQlN3L4COuci0hf1QsaNUD7dkIy2LcfUhKXm6pGnLA4C7f5uTpcfWGueSR6\ntcSHEtwWZ/5GdSwVDzpbdxBGa4mS2jTWzRjCGHr8nS9bcw73na81d1nnIcFn\nBSYJ8J4d63fx2cgg4s44HtKMLXTMqumlFj+OqTPSe7ss0twLUZr2V3wjZK51\nrGqPLcVev/3DapY13i+fuSBjEoCFvUCJJ3BkJowDHSE+quqrbcKJtGmLXC42\nq5CHML/eFwjf2Sa8KtKUt55j1kUwWbmh3eYl4mqSqwq3XRt8l5KZmQFiALHN\ndh8wMqWzRLeXiwBaPXFWOr+R829GW2uLqcEWAuFxJHL1kf4iLNzMOX8D+la7\n0whL\r\n=FflB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqXrEsqPOoupkVI8A9Dz4s/ezntReEZ0Yz9mQoiFGWrwIgTrG9cXgEwdnnW8U7GdqmqVrn+LZMFBV61pljHIuannk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.c6870f20.0_1617320490916_0.3881574405232171"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.852f873c.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.852f873c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.852f873c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"f528b03c675bb05baf871766e103e6e35c28e203","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-sJfVF92Mgr0130/SHJtMxNvXp6DijNHWKuvw3U4UTWkKAx7YdoSlj+B5RkszsAydc7w7XCnQRqeN/6cAHehaag==","shasum":"b8e0000d44eb13e133677c1997d20730b3e9e8a5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.852f873c.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqnoCRA9TVsSAnZWagAATmEP/iIzOi5ivJ+Vcmiu9SwB\nKS8ws+TXgGb0HSrEWOI4qvwqYNImC7YkWHGEXK74uje4ZYy3j32OnZhSNlPo\ne4AoGvBGiVMBDIAf80Y4frr7qDLkf/eLxM6pQVDzBigQsL3jrIVxmXE0Wfk/\n552Sc+FHhBt7DZKfNBmrIS5YVmmTdr1PXdysYR2pLMf0kG8dhkyk74b+Hide\nQeE0vfnlXl/mNvxrBluEezC/kbjOhLfHcLVSPlym227+MGV/LbMiRXMC1KwT\nrHmbyvSp8JF8NkjHxep7a03GTwNG1eaXQfkS+tmTKOGb+6MiyInOku+U6AL9\nUI8SqOtJaUh4/ggcXgaTDn0aTlRav2m2nDSffXmEn2yDf/jE9YFbk11n5Qa2\nI9s6T32HJLNC8npdL0OiMCMzVr1r9sRIH1R39sPMAW/tBH2yz9nwLtS5GBbB\nFTjklvtR9gdr33hn/L4EAhvJgUG2B0km37/ARr+cBqTDknsdsJcLvXQO+j5m\nfJ05rOki0yMFHz0nlmyxnza4M8zavG8gZjfd235u91C+NXJFFdyyv8zFyIXo\nf7q/VHkpjm6X3IDHS6JHdTK1lEdxZYWoqPSrBPWs+MSvZI4Jr2h4pbXvlHYO\nJU3S84ammfKdYgY3tAcKXUCxZPjus+t/AX4m4GFyASN1/PVbQftSnojRXvL9\nheja\r\n=1j4H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD15eyRdKEu3kvnUK6OJo3EPUspYZV6lovWUCDPfxDqDgIgCAYn3LmrXBZZUjwpxSTlKEUD6Ocx3wHKuxNwUy93MQc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.852f873c.0_1617340903956_0.625873453831344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4a674a1d.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.4a674a1d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4a674a1d.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"d4f9464090813f45495113dfd52201f8c86bab3f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-v/3Lr7hNlNm15+q7jfjbUhJ8VonJHxvO0JyxlEEZ+qrXovrSV/LE+/gJV1Yw2XlzDqI6zSa9QIULS48KwDVydA==","shasum":"13ea534501df9034e4d40ac8526c540e94046d65","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.4a674a1d.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy2tCRA9TVsSAnZWagAAB0MP/iEmDaM1RiJHdfaOB49R\nblIFxNAkEPXXuvzs2RyWiz9vc2KVGNh0X4K+Sa1k1USmWBJhNKrG9jDyN3vP\nd12OXFbwe7fUL3qHyHYkkvUsjaSYbqya6EG4Q1MqXJUpYJZdB/dy9kruzv91\nE0if/JCc5L53HmC/HCeji1yNJYBJTwgSZqqz0Fm9uBRCJ16Q6JHqIZHKSJLV\nJ7jLX3g0YAHhK405NNhrQweu3a3ymJ8nTkkKQtWJBo9iktd5r2EgiYSxkOVh\nzIbhU4Q7+RPRLfY3DtEvV1pmU+p/MnT3XqrWfQOj8UeYgFkybmDZVkehZZuQ\n3JQafLMQAvbUfWCfLr8TRHgNynuY+7/8z7Sb9GdaHa56Jvh1bZAXK+zd+so9\n0VntdtFogxSw2E6tLlFQXI5zX2MzJ1lqDW0joY6ltlEVzioulcGNFPJA5gky\nQvRi8V/VIX3xiCaRYmwKMFki/cEHhf6fAY4Dvh/wiFzdcxCZYtl4LQwXZXzg\nA9EuJM4XeN0/xqJJEWoYgR+8HhHtlAahGey4iCkOzWTLDspNbu/UCN1jfnVl\nKp4Wlfup4z2hIoiWahqaywKMxJtCTo8JSuQqoeroCJiUi09cg/LGjmXMcqQH\nyTkUHWijeLscxEIrHx8LIwatAqsmD8vLqJfiRE58FqWHG/Tj/xL7Ju4AB2pX\nMIK1\r\n=3LjG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSToNl/ipB3NkQcwEDDYQa+vWTONnqJC/LKYeiICUOfgIhAJajwqByebbh+UDHmHChKCnqgfasyXxy0WWyUxo94U3Z"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.4a674a1d.0_1617374636715_0.0869353779624269"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5b29ff1.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.c5b29ff1.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c5b29ff1.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"c1604e99ccbc76c92a4371c529c43a4997f78c3e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-uPxYqkaSjB8xAqj0ywGNhWutZ4Py7fUGHRjtBnkOcY81UtT7xpcJeG8Ffnly8qQisQjN/JlE6VgiLGRKWD5w4A==","shasum":"2c5bdc191b343268860d356732d934d4c463e942","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.c5b29ff1.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga02uCRA9TVsSAnZWagAAFm8P/01G9Hkng/U1ufeKKdog\nmoR+gMsefJv3mbd4lfd50vrqV1LZlowDSdSB17tmGd1FiOJh0s7b8UfDCjSC\nCU3pqlxdWqrv97E2bkgO6JLjRQk1a0OSpi9JdzqQBfyigOEi+JCLsQCuR/cG\nHcKTO5khqOOWw39JSs70UvgPSW7bnuxCV+y7DeciN5b/3q3hvyul8AV6UxQS\nuBgRHUfT277vUD9fTfylNoVZt39Xh9o+7qGhexAMk4s50u5ZqCAD4lpyVIJD\no/tgvqf7EfKpXHXwEZfLya+CjjP4ynxcru5WEZSNZ38daJATvXKskoJuK7hL\n6GWC/nOFctWGqgF2vp87LjMkY4/2gYX9fA2b7gklfev8UuxSCfYCte1wn4Ff\n8jTLt9inuqDk2aj2u6lRlqU2fF9d0hIcahWfe+ZT4ZFCf0eEpYioktsBpnRr\nxo3H84E34ImOabCHLUjonu2kJRYe2c+udf4obBjlhDOhjkelRZ4chtjoZlrd\nU6LlP5tzBnMWjrvXGFkKr+OkhdCPfwxKNfNu4HS3I9dfwbryPZoAHg+ro3pp\nR8o7ULSJLYvI+HgI05oM4McoGcIBpfNCrgD0BA9Jzrx3OGvmgJ/KVUzYKBhu\nSzL0TJztJ0Hav+wzLK6w/W6DwfoxdOR2LqGQKdLn7Qk8ZQTH+tw0pMGyDjIZ\n/yRY\r\n=yhmn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBGP2TqFTNf384G7nwVw4p/vPYDLuS/3WZpuxZrQs0XeAiBu/BJY3ikH8FRLbnKNJCruIIPuPbnMFRo3Pa9jHTgJcw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.c5b29ff1.0_1617644973968_0.7010496008971108"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.583644a6.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.583644a6.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.94f50b260.0","@material/mwc-base":"0.21.0-canary.583644a6.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.94f50b260.0"},"publishConfig":{"access":"public"},"gitHead":"bf2f1c715105004d3849ec66e044434d48e08296","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-phGhvYOvWbqc2+ruBABM5PvqmcSdhb4wciTFK6E2/LYTTlZseQZkpEYgfmjOQeo52PDpny2jlXHtNQYErUigAw==","shasum":"49018da56e9ad10c043b7717478e651ff4da3956","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.583644a6.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga03sCRA9TVsSAnZWagAAO20P/ROKoHEeyhn4r1xXTKyI\ndggENKrM+X8px7Vs79HGUDnSd6NoGVc/+wN/fXfYFY8bwuV8vcFAQ80FVwUa\nBM9wG2DnjJgWYumdPtgbckRGUwjeJ/d72h51KiWX7PVSFKhBQbJ0aWXr/pjh\nos5YvAGwZ/wwTMFGTbf5GrxSOhBDxkgUJ/VoFbHU+W6Hu1aVE2QBEfJqnVgn\nELt6VyNEN3DIaoL4PBUCnPiK+pj8GnLJ49M7o5fJjAf6XXH+sgkma8fx1u1U\nKA4/onNCfcvWiNly4Llc6rl7QhZW4j8eCuuQg2l60RY6wZ46sph3lUtzc4WR\n2JaaXIWXDaFQIfv5iW/w/1PpdiZn/+s+nj4VXtZ8/4uNLKnhRFN53JnkmVxD\n6av0CuGPlvJB0bNfy5LCfxMLed3L8IaBZRBviFvQPuSjc156eHPmk3q+IghV\ngt5khIDrA+6bOl1//qvZbN4bpPzNSCE8q5PMlUQLjUAxRUwDqDMe5eYDn8RQ\nACQMvh4kuWfb23e+VeF+SQaRYsWblgN3BD5Gc/Wo5CxAnc0tYQUU5EXvdYlD\n8EdBJyYKZzCvw8GEELLPFBbu7G8Hxej8lpYofosEuKAX5Mr9+WHaMgLfkxVd\nL/H6Ijoeu4FSo/zzSPPNC23clxyLYJj7zr2ty1KawTPmUdowAg4k7VDHMcVW\nCxek\r\n=YejM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIALuMseib2MRwyqR62DYcvDNNxWqH5IcspIJtDc0VO++AiACkGB5zjmrQ4z89ej88bDwBdCABpDlEI3pq6PGvTbA2g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.583644a6.0_1617645036084_0.15841712656980245"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.02ac1e6b.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.02ac1e6b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.02ac1e6b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"c6e525b215b6043eb042d3feb1f6066bd536bd94","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-zcrnVV7bEuhQCJzWpvmQ3NP9dasmo8NVgBAKSp15BWPTzSEuIFNhX73ItBMjm91tktBsef6K1lL9TPjRn/Wu3A==","shasum":"4c7ea80ac753ac862dcf35c386503ba7fb6affd8","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.02ac1e6b.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKoDCRA9TVsSAnZWagAAaFoP/1u6mUZ7ykuvNmvf75Il\nl1vtHsjgB9f/epzmRZa0bJs3CIvz3+1sLebRqCZuG7GzJgTn0HoEA5Z0x6bs\n1fjvJ80ymn3x8v1bgj0PBtnu6hQSuqeXlT57lvATrom9/6Zf/CwhhP17Gm/e\n3dFpQ7xjQGudV4GBfgPqJI9ZHK+2DVZ9AdsiCxvOGh82GeiZLDk5FoD2Nsuu\nEnMUtNo0wJNFsXG0CW3OIxZ09z3hsrcq/F+NNRwEj90105raxzKnsY8JmCt6\nI1QmxAtQRCGeQMZPIhZVA96pJ7tqF6CG4Yalgxgif/T5rzeGwzSHAKiXJttr\n9H/p1bzt2oA7jkAVsU1z9uCeDlEqmRjFru3avp1jDmDp5cuexxJnTuctxXan\nTft5GKLhJtgSHjMajEXU9HGZv4tKcmRxp5faklaGj3j5NgTmRry0hJAS6Hf8\nOZh20Ve40j3BNuDOAVywhzhEbD1DVBxz7SOgW65oYshYs3EIyuMawAqEj1dw\ni/YNeZAfsl8YjQyg52TuXP4uWrbNxxVi30rOg7nPC6LFMd3MXwfnvlDeAPqK\ntj8HRsA0X1PU5N7yQacq65AIpBwjN//EXQPtn4pNJItVBYmsHAYNt572mVyx\npp6gEzFZy9cHt4ItSebiuV77BRPo05qZxgX86J/y80HzVcvDaLH8iqEtoxDX\n5115\r\n=fHoi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCk/P6K+YjAM1G121QjQFMweoVxaDBcWYb7gPBZUgR/fwIhAMIW+qIxe8pIy0UMlgO/PrI69d8dStVARUL0v8a6r7Eh"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.02ac1e6b.0_1617734147342_0.358889231431752"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5ac5856e.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.5ac5856e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.5ac5856e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"66f695ff77b118469a93aac22c76e5e558c242a7","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-DBWWbYuC0+Y8draQhIlglRs1LVMV2t28NNLpHhzCVKPRz1692F9zQY2M617EuXtSwPDF76yBNVnzoF0WLnxJ6Q==","shasum":"3f4ec3fcab82d12c8cfc275cfdd31941338ac9fa","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.5ac5856e.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKuGCRA9TVsSAnZWagAAgS8QAIs8Qo6kmgPRpCAhbd12\nG3V5FqOh/KohpD1GY7aM6n4vCdFYabpShpQARykkZihKIkPIw91avWJx2hoH\nx0rr0FdVqgYNlO5JbzNE/6bLMv4QGF5MpZVPy4m5DmIg3blABEDIgU6QNITE\nsS9XbpXRCA9w+42Tx7lq4XRDwfzojH/P51arQmT0iapl1TAARuRL/x29JJxD\ns1ZWc/4nNep+H9vjU0zhnHhpzosrEKTbapFt8tCib5Lq7R7dzHHmrbUhWLzQ\nMN5j4nwicGKrfNS7Tcqdh7+u0kxFYGLk4L3GVwP2Zh3cQWqFR541MO1oHx+2\nu6keYXSXFTu45XmepfgsqieE6XNWotZXiidpCnvt37keLpzx5JwCki0Mr6Y8\ncqPMOYyLYuL7UMq7XSeTybxJ9l8V892nyMKWHJBI+NwywDoTJFloK8hvQWj3\n10Kdcp6WWWL8N+sa6BpLcUSn84ZGqK0gmGz5bSXiQuVDt0zZWOm+e1DvdZJv\n4jzrlk2mH9cM85Gm1myiRGmrTbZ2l03AQN6uKKqtbWPtRAv3NRz0Vlxyqut6\n5egOA2VqACMnU0/tyNthjiqPXVSdGN5x3Qm4zRzjR1h6iU/lEXIiJndNWqO7\nVo39EL8w4ZgDn71wkQCiXm+UXoGEFC6ufAd89JaBzJvaFfGRY8Vn0vPNNd4e\np9/o\r\n=ygEw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHS2q96GJuSFHdmqslnUlz7K55YeGS7tBL46meBl/Sg8AiBOADwBFsZk8pf6ZjP9hecXJkE2FCCJvxZu9yrbTZKbfg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.5ac5856e.0_1617734533677_0.6911018489509526"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb23dbc4.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.bb23dbc4.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.bb23dbc4.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"42e5f906ec61897cd0de7e0e19e686d807408d70","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-bSjqxBRKh7RhC7V74Pzv8WKY2X4QhC3TF9avowiQyX7/aAYQy7XJzqLd2NtEjJ1eEJMKZ+SGgOpxO0NmE7p20Q==","shasum":"350e28cb956663dc7c4233d1aec2a50df8617820","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.bb23dbc4.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiLHCRA9TVsSAnZWagAALxcP/2GaAmI3uKKYFR9AnqPX\nX+NlWO9z4IYoUvbec+0yGOoVq57CXEPQ/XyfAZcOlKMdzcU5OE/wFP1Ukus+\ng142k1w44gPxcusEORQ+uiJpSIfFLqfG3HE7JeYQT7I/Nv0j++jSFgJUB/s1\nfRfZgvLI4jSGeUdwu0xjVsodJ7XbXvkWGZUTQGAWLqzqH0wOVfOWPWb83J4d\n99HMH9tkQbkz/QvoMBGvxMgooGM0oFxEKevq+ymjYGjQMlrcPc9P2LQUJhZ/\nOcqf/czLaK4Iui2WQ4VpDNxo01K0nG5+/gPkc4szVcYZjlxRC6g0CrH9gFsq\ny3n+SJt+VBcMn++UYA5uYsNEmKBxltbHPnNpP7+KTEPcYSlb+fLLngfqU1LE\n9/UHbRgRObMr9+n7Lb8DPVGSILd1TTW9MGSxkG9qMXdsRPCJ6AYRK+xe3A7u\nmcsqyW7rfwc+lyNhfcDeN4u+FCa6c/IhQQoBNIOz1MJoJGZQ+Su9XvMq8kep\noBe3aXRKlArmCShYn0CHZtfVkEw4wWRR2GceBVhY1h4OFflN/qM6Ngw7wSLF\nF9s+hhTl65gMtJcO2yTahlauPhjKwVWoGnmjHJdVifNZQb9zJmyTm1dCVP19\nTeGO3y/JxjMlMtE9Ii1bQlomh8d5ULBCdkAvwVgoOFCKXXvtY/0IGwD21jAw\nlGHy\r\n=begB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBPA94ailVtpjb69bXF9gEa5/6SbgGtaJvfFCmZw/SbNAiEAnmrPwCWDNi2UqfnCl8FE0cQKiQV3UXlQmFr+OXb9Nuc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.bb23dbc4.0_1617830598870_0.9792355309368488"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e539904c.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.e539904c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.c91e8d141.0","@material/mwc-base":"0.21.0-canary.e539904c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.c91e8d141.0"},"publishConfig":{"access":"public"},"gitHead":"0522583b3f6a950dde45ae308718f06d90d40a84","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-hDND8RsHM6jRITG+RhdKCwP1RLo9bF+afqBMypuZktvW5xDg4U4RwTtRmkZtfXEIxm5B4+sxB6Y0uhE1HYdBGg==","shasum":"8eac0a5a1c5e3695578ed6858eec7c185d15d989","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.e539904c.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0UBCRA9TVsSAnZWagAAUKQP/A1hh5TclM8CxU/fLQgr\n4GHoYWWX/rE7I0DfnAzaOKu5leRbHQ975BtiAcSz0TFpv33YBp53lp9KzWWe\nmsSTM1ezkCNCOxoUWxrqdu0+sxT2HKuG1t8+KANfQUuZ4hEb/pdF2Ro1+khZ\nPClkIMhXzEU/bHX0iBr6pYvBGSLAHWJGRCZDwucQCkD3hp1AHu5EYCO9NuCT\n2tZEbXtvF6Ar8puAQXYBPdF+8VLVMQH9GF2CiDq57DQZG2Gd8qbpQx+Di0/R\nkdhbmFQ3Iqg3+bL1ugYo/jLYk9hQCG0UPbC6pJo2cNWUamjEs0FsfEfLiS9W\nZOK5b0TfZnaUw4n8BoR17QkH4F7tcfVbkT7R9uR7nhETuSD1wMETnyGfO7EQ\nSZv4tSYZQt5Rn5TWVU53kBDVY4yAG19PbO/LP3jbeaollDxEfwn8qR6ssXj9\nI2RY1cW+OcoJKUHOx68bePXGIhaPHVJKPQIyVYBZrhY4ZyG7WhjMBxEw97Uq\nZi7f2LJGx0YVQu0aJZaI2aR3thvmW+85oqE65JbDhUGMBrwebBzzikFdyr8H\nUzN1/CWWh46YP05AfjumxPIp/2NgtHu7vYKFoZ7HRQSLRDmw7MZo+oN4wrAC\nSoKjniFy5HUzQWvtIHALFYC5bGkMMB7jW8jJrylwhAkyGC16u+e0LeaKe1pn\n6+04\r\n=Qb+Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbHTAZy+ZuvWCmT7MAJHYRnhTWxLP6J4Nrpr+XP+QzqgIhANjpf/UfkmTXHtnmlR3WDjyjSNBTfw5DFt70dGtvOeP9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.e539904c.0_1617904897390_0.2603505409585938"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a93ae333.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.a93ae333.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.a93ae333.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-1065eCW7t+urNVYEYI86GWMqndYCTa158CKlYO3fYXn1oipJCrAD7YDDJg/ZszqYwfGhdTJ1IGC27UsdLM6Nhg==","shasum":"c2f366ca646ad548deb15aba09a1276fb0e6d1bc","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.a93ae333.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLTPCRA9TVsSAnZWagAAFpcQAJaaqjcvcVrQd0x/HtW+\nj69X/yotn45lWzeA3JPUijyzqWQC0AUbyIfQe+DxfdGRTvJy3KHfiV52IVTL\n97hSQckccUj1Df1w2KfbwqE+9KVl4nKLTl5t2EJ+zIE8Y+baXq3mEUbVlHEm\nUzXvbit6kcclGYSN0/tZ95TZ1mcK8p49R2ZRIwcZsVZI6A/DFAhlZpz1mEbk\n3V7eGjVBdrtEMoaT3VhnjPz5yqykVZkV/tU/tC0AqviF+6rxKoHWy8HYXR7S\nYVrAZSE4ih1PQMzO5Dacddd4fmTl7xD/iwgd+RXYDeMjdHKwRXnrPBf8BBbU\nexiT81C9AMOca1zhBBeYdlRcn/xO+UCCcTYUu2GBA3qH5JbTBsrVONFlDi5n\n6sLupj706GlTXrak4ejxkvj4wRhViSO2svNEUU5aGigeGrihT4b69HR3Evs3\n+4md44KpKfBOZ8/RfNPKcMJaryIbjbYiJeZq9XSO9HwgTbMbkeuvz1KSfyhd\nmlmrXxfoX0yEz76StLOXXpnf8sfZzSHCBUgspeJDYPqePd11mHFQzv243VjB\nyDHPxHc+TpQnBPbL/sqc6BMDbaRw64IKeWQsaxccLh+EyTpOfpBAf7tx23Zx\nXc3Gm01rdQMNURP1X3tEU+e8kdIIBoPC9LB8nvbV2PkY4hEasvzAsFfo1Ma2\n0xuV\r\n=w8nX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDKUsPsKbimShX2dv0Rva9/UxRjkhJcWKnrUrYn5TiiHAiB9xuyeWhIZCuWKQdr9RLTm74ClXB+HdRnWIXaE6cJkDQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.a93ae333.0_1617999052490_0.6835080563903175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e142c144.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.e142c144.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.e142c144.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"135f2f0e24347fef74904a437124ccf8978e20b3","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-vhQUij9zvtt31moydgY5NzZYN+A8vT+piBp6B0YoSfu8J9izIwCq4LO3yN0v0mhFNoXQU/vuffCRiTiHoKqR1w==","shasum":"35e1af45770652ec8191b48ee010eb92c208cbeb","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.e142c144.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF4iCRA9TVsSAnZWagAA7C4P/RpjzQBc8X4fwIkytF9p\nFjRmZx+g5DhY0Zz3t2+AcUKk3f5AGZi/xYuZPqV6UQT+z3BV+bgLPPGcNC/y\nv1o1remiNbt4gYAvs7LGaltyBwrIDrL6vz+UCBC+MYQ011rZ9i2Gp4y7jC6k\nWQU8Z/v059buY4euKdWAfq/eBlhTsgJUQVJFWAcOYRcC3mqXI6L6wymE68eH\nmMiMZ5s+LukGCiOOuyPxVmonV1LidHgJDt4Kw7O0Ds6Yo3aY+N6H+XleZgXh\nlvhqE+oiPf9+pEVcqyHnjEmw3/n1Om14ZEOsTmsJhUMorpjWLLLNKSJUe+g8\n2yw1v8v1s4cQHCZTfmzUMowDTRUcSlMkhpuS1ynnGPssAxAf1GQLYXK4Vo5/\ntC3FUWXZX5zfvRymydH1ddNIf1re20tCpFmmQB7rBgy2579YHeISAv0qvN+z\n0DoatwDHzsVl/6J2jANSfzGu1LAzZdHuIKY9dJjht3V2+ZjHWGyl2wE1Kqkb\navd7LLqdMqU7Ht50d2zVajeMBPTRWYKSAHQPZlF9BOTIxjb6tF2x/yYneucw\nTQ5/n7dATd/G0qH2O4tXCtO2IG+5vghEbntTUD+9ITC3zJXpO6gtc2mfOrZK\ng2OOlNT7R9MwTvKjF/taw5YUiLeqOj/IPSuqLIf6HDeUrmg5xWIuyIgmhMEM\ngIq+\r\n=oIyu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICaq55WseY1DfryJbNMaViRMBea8BIqkh6aUD5NMDmHaAiEAhSvNXCDtaPaPfq6rYykrY2dPfejGzYHXzrf6Rx9mR3Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.e142c144.0_1618239009816_0.462114954487012"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.382d7eb0.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.382d7eb0.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.382d7eb0.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"22f558ec852007036c1b01f2d052ff4512cfb420","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-GvMkaA3ksyFj1CH/ur78n/WnEJ2NYIg+SB7npjf8xgoBZ1ZwnEs4t2T6K+mBmk1CNs6wP65tBqNrna7nobj58w==","shasum":"1c25c964b6491c56695990f658aee208a832c792","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.382d7eb0.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMQOCRA9TVsSAnZWagAAluwP+wbOrpX2/ylBOLUlCAwp\nATjsm1TuylLEyjUq5I1FcINCCokU9Jy6EalflTLFzTeC1W9/toWPySci8BCY\nmvYySeepcOBOZdJBXfkHIFRMkDtLmDojp3BoAQG8UqRnJu3ksL3kR69w7ShB\nehiNRD3cMbVrEqMMpg/rqbuicUlJw9Sk4eN1d160daz4J5sBeTKWmu3LoPJv\ndKwoPVXljuYTuae7ophJqRTWJx62v34SadS6UALxPe/iFn1jiU3GabYO6AgW\ngTElm+x7qzeL+/pB5zgMEU3pqZNBRy6iHrRDqsUqSqCcaoLXc/bk1j8iEkb7\nXDozfA7foCnAeH9ZiNR7ddcdcFpsQ+uBbr5Vppl37BWvzC6SP1LHHRW/pv2E\nORg6L0hs029T875ELe7dBk4xzktcLZSr1KLP5ziUJMO9dIYrakgvzvxQVGGk\nMGAk2OF4uCq5YZvggBCEb9efgMYSJ65IO5UiR9zTzI5Ia6Qa47xbHaY0SdYD\ns2EXHuyAF7+sWkMSh8RAX+MflyY8FMbjsX1NmeFh8diytOrHaqfmcL/F4F3o\nPYKsMxS3GeVWpr13K6V4LenqOK/fBdAX37hVSYMfwiJqKf1e5m77PJkItxu9\nY9rL4znWW1WamVQkbTCvgN1/ol0QSvy8CUn8CEQq50Moz5/LHrOymvXOcKyJ\nu5W8\r\n=LFhg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAqP0cFIpoia8Wbdcebh3JGeLb4QweBiacta3AiAU2L2AiEAxVXW0c4DhrZ0K5JeVdj5IPLceO0XOpJwMAXgDeLbejQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.382d7eb0.0_1618265101857_0.1981997756124938"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b16c7885.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.b16c7885.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.b16c7885.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"effabeb19d8128aa03c36be651c6b4eb98d15e9a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ICpqtoivj76NahBow4VDIA4xuzBg+Vd71VvzypQeKvf8sR84+wEtmwec5eGohEbbhI01d4xCO02F4l+X+9bc9Q==","shasum":"20a5e954f770e7a68a0196d1a4a98f03c67f1a52","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.b16c7885.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMv1CRA9TVsSAnZWagAAfIgP+wboIm93ELwUhiKFFMTu\n6Kdn4le9Ht1sJ6w6aA0o/BXarxsh/K6wyDNR2AmnA0pInwFoTGEob8fo7lU7\nk7N3FTLwhHe4B+gtzp7PNu/+AlZbNCTwR6b+AhjDYYVTR5b9LGVFnHDrthxm\n1mNrJPe4H6/tIaRi45Mq8uItMY7OpRlb9EkRvVbuiVV09KDYE11G+rdG+gNd\n4XTy2gSca0gcHPaNWbAqiBkfq4+YBSyn8qLaikJKpPW8slUa7hunx8p2FgOG\nJPle3sFRM91/epvo/1LSGYVLyD9zSoUGBjstHvQnutI1h1GVGU/eU+Hu4vkQ\nfZHa33+toSIURyETTN0Wgy2VwIdI8qhD7q0+AQHNU+ZYfxL5VC4YLlB9hiuO\njZSrrrROH6Bg191g6/fIWtqzlviOMoZovvktZYdDPNWomm3B702k4EJRF4xQ\nbw03oyrK1sDhmMWY+yJNQWikLivS82YPYgm4FU6m0OapSEv7ugOpeR3tfqOS\nCStGAzxc2rtaPjOPANQPbVXdjpmz80NvBHCvz8SnE0L+b0fcLfrUCbGv54Y3\nd8uUsb4I3V1L2EqgGyK0h5PF++V04QB3w9pUHLMMm0aBrANm16rZq0FnZdgQ\nND0w09ceUZacgiTtNvmimPonNyOmJAeLDsq4V2oBAI+SD+MVNxFmE31f7si/\nrPcJ\r\n=YCal\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEfAV/3Ol6+JJC2HKAKuWIWCOqpKcJxOPMlWkRFt3ho6AiEAunOO06EM1gDfzbeiDlG8sXbb7UiufwAzLImdC05MZwU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.b16c7885.0_1618267124856_0.5415353767361848"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0e92782b.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.0e92782b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.0e92782b.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"7c46ee6728f96c896cbcb981be39309e7fd3f60b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-NjHXFUkNmrx2UKkpul/rOIPvS9/rq1qyvHnHXoy/SIBkKJyMX6+V7iGqoFsByRXizBsOzjoS9GIbLBrgyA/z3A==","shasum":"101f7cb2ec2f797717fc7bf39cd35e9ecc3c91bf","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.0e92782b.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda2SCRA9TVsSAnZWagAAEwAP/1evUVR/MTTEcr9vqe4X\nnY4C1u12AiNlAvqQ7RxI6hPsvfQTFCVE1aMyJQi2AKZ0fo+M+IdmjoW5E26z\ntc8BeGfiPXsD33LBhm0C6/ECZWsJPJjm0C08yM1DFs+ndDGUznqeeloZkYaf\nlJXMY59n8AEmJ3IUMSolOgnx4tW1WtE4rsPNVjrjbjDJae3FoX/TXAETM4rg\n0Kd/Q4U2kuDi2gJpvbQ5oB4UW6qF6Q92IU7/LTkCkYbFNpNEpYUXCsu9DjO9\n36MbJivr9TVaB5BgD4ZJdLDJTud4sBVY8j1sV/uQSuiBIn79025rd/hXJfu1\nBs9nk4AUKvA5D6tjHajXrOscSPOBM+ey6vdfHKZoDmZLpuLJ3YOOz9tNeCAo\np5ZqzyTxLuNGmZfzfGyv5u+oi2DBMfWahF6qg9pxfrhTqQVw3KH18JcsvaSL\nTOklD5IGk+ES5G9kfrLwS47QF8m4R57M3sizRJfaw61U3ldkWI+PV9u9ajHU\nsPwXbpfq1FmlH5CPAQT4Q1iFuK7lAvlxE13ePJDsFM0P1eWqN7OZ8UTsL9RI\nWXS/MQR94lBC/z3FGgSK3K6oiFG/nfdo0YKFrSv3Vi1i0HEkMoSP49eC8huo\nyWOGuVQvc7NoH6Wb5/3XtbdzZZ+b47czewDqLvMkRRqzoMwVzY6Oez1ZnbVe\nozRM\r\n=RGLM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIENdDurdRdOaVpU20yG18AUKXS7tXDYksHiZ1hbYIP1uAiBmbSLhfSxqjyJYloWb56U4UnDR5pNubdwsXs9+iD7g/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-drawer_0.21.0-canary.0e92782b.0_1618324882303_0.34798399168027516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.70b3a072.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.70b3a072.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.70b3a072.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"12958287de673f6ce0eb511950c61be3d1a28235","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-9/ut06/BAhfmiwJyQqqLZSEHXtZkRVdGgQhXYgoWuyceoyS54tralrw921hvq5UCeMd1o6UxGWBKwQKIzqhONg==","shasum":"544f3b47304d9ccc4f114ed909a102ceb76392dc","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.70b3a072.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2vuCRA9TVsSAnZWagAA6fkP/jXEoR2z0v2ufbKvdem+\nZGJ+awUtgDcxiCkvyn5Sd/59nhQlzZG5k6QGvCzPufgD2durn3wv+DGY9NBd\nHJzke1EoKSh5hBXSyJJ3Icl4b9V9SMHgEyzyap5ZajL7Yuqqa8ui8ZZ+mQAF\nZipxVI8k72UNCem4dy0Wi9x5JoDQnPsU8izW4ND7SfrCzzBX/Mosxg0+WRCD\nVe3k2Pykx007fYL8WMn2+IFL5v1LDty0rovpsRMeAziDQOI7TJBryCERWvcl\ntYNXihNJSqBhKo3cl3iX8Q7aMZCSnzoUDlQbLPhpPIdki7YzIaKTZyQ4VUGG\nq3g+b97112EvDHHDDPf1+Bq2q1B2M35ZEbOK1gaMnHKvO+P5PJkwar+7yf7C\npP7i4Tve5De0WjVoF5s0VHmNxVuiHgs8WqfAJ/Cv9VLWCV6ECjSb/SroBJfz\n3qUv0FJtieCtNacBdWQSKRsyXWO/MYiQEXbMCy7cgSFy9eRZKWRAx68CYXY4\nfo37xPZ7eAd4nl90DiECjyETVHDsINtqbzfuSo5cj7tL0CpdN5uogBpQGBnf\nrAJcbhVEBwhoqmPyfRGGHrNQutVMHqB3E2a/ipslFahVozEqN4rtlWhMPk17\nnL9zki/zv4PPkKtqOEvyRHAef926CJrDgmkkoLyXsAtDTTbo1WKE42758ga8\nzifD\r\n=qv8i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrCusr+n+BC6J9Uo/bUHYDlBx629K16B28hTX8EgAqVgIgKzj40JegN/965vj84Mp+mUMfiJnIUoNvSOZQJ7SP8lY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.70b3a072.0_1618439149764_0.30485844739189116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ff79b092.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.ff79b092.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.3793a3143.0","@material/mwc-base":"0.21.0-canary.ff79b092.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"88513d2e247534891581014622ab048f4f2c52cf","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ulj4okTAtk291cX/sKMtxB6zJKT+AlO7CBVwQwiciedlRMl9JV2ut/Kg73VQ0q/USCE10Ha2xQYe7awBVr1jXg==","shasum":"efdeeab3e5390eb0c529d03b9c244ae80d4437c2","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.ff79b092.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI0LCRA9TVsSAnZWagAA868P/jNgKLX3yLsg056Z0lJg\novLvtfDB9TyIZqnAxXHLQPrBBE8v3pIBb09/o8e+onBbWifdihNijTRNj44T\nV/kixwAvLLpxABHGUHX8KqmIsVsl12KYT9g6o7M9Zgmvw0CMyEcZa5FL9l2H\nfUzW6K+ukbAmPI1tZbK7z93QwgxrxzU3jIFjc/jdEDTpi7v4nnswstYaqOLk\nW8eI2plFmLU8C76K4blzQW03PjI0Bt45L67ILyIW/yCACPT9/GKmfytsqb/V\ncNTYPZPfVad19d2+Hk7n7NqB68QaInTt2YwnuGDsnrzZbTSusfKVL9jzk5rg\nuZukbMu/NL4XT0Ye5OFbjPrU3D1tM9HemIN5CTzOeogkJtTEBQmVkhJZmbcn\nzWA8EAaJtWyTqdS9TqtJnv6PU0/CABCWWj3NeTptlfqK43KRkgMSUckZbLPN\ntyxguZCLSyZlsi8VmNX9Rz98aPn3HJmxrItL3WSCPsnajtsAhAZe2wDq2wXd\nQ6Wq81IttS2q5E14CcQ3DG9/6kOMygOftTtwZH77Vj1jCxUDbgyraoEDKNRX\nsTqmIS0DyA8JCVSTFycf3ZRJ15q8twYyPXlrWkY38lmLUovx8j6K7LEIDz+U\ne3yUL62U+PGg2zI9B6Q1687i2XDJfiwG05WmoQlMnJG6HLYx9GZhefULkK5k\nUQWE\r\n=AYNj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiFQib7m3ZLYdrLOgA/Z5IPUW0nW0TA5OEA5xRVW/JgAIhAKtYCYp8ABQiQum1+39hLlbw4VaLNAh8IqhNyTM/GMw5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.ff79b092.0_1618513163516_0.7156659781271395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f35b2fd7.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.f35b2fd7.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=11.0.0-canary.3793a3143.0","@material/mwc-base":"0.21.0-canary.f35b2fd7.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"2b12bd76b8558ed1f827fb23b46af6854b404f91","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rkH+3CjW45yZL6qyKTANL3aGNcLXvE/EQnsGkmFH3p9AIDxvNYMh4vzSFEOxoHU22GtDZjKkNC2sPRU8oUMaGA==","shasum":"4e7835e75f2d7303bb2c90d5878c2d31e770ecc0","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.f35b2fd7.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI+CCRA9TVsSAnZWagAAeEQP/RhCfdd5XbgZXlDv/tzt\ng7tCPcKdfr4UR5rcsUZY9CZg0UDHSOJWpfDAfhup8sayPNDMgPDvGSr2Sj7t\n8SWIZhG2EtrJSFqacr5JUMov0JuhqYIlg2EYV0o1UcFe42hfSrLbtbWIp5PC\naIO94QSGzQvWOmbYbkQU+p9Cr3g1S4FzbgZmDJso7G55dVMRiPUGzPf9sst5\n5GX0kVpeVzmS++JUjmoKd3OnyLvaE3FrSeg6xXsaoO97IJ4/NY6pckOkuVbz\n4m3gwLuxNdgMvquPXYHulK+3MweR7/j9/g93+mSU47Bt1lH2SHyn6zR+9eW+\nQds+m2VzEae5Tluvu4u2EhQNVUZ+S9wlxXlT6A1DzyVs3L5HKa5ydqC3bj+6\nLCfaZ66dKqM+IZVmsnKMj7vefo2LMSDcDRd8xl+7mlMn0JQJd1Eny+k/wJxl\nUkXHlmt46uA5VGcqxSEd72pv+HxVyfT7K67NWm885KA9o8G+rn+jZ6CgM2Xa\nIqeulqBB/uvwulA58XcUYyD4clZWbunKp/2e8Ev3Tk29yj+mmlbr+/xh4xGv\nTXf917fOmekAwkTTdsbzkIA+o9kV9G1EeBB1XarzHadyVPs74XQNbwMdWpOV\nPL9N48PknfwUX+dmjYvaugeh7i4Pa5g3m6wTxjwMoiJzIYYoB4Hi3Yjwp2zx\nfL2V\r\n=Uzkx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB56TRhU/n4nDM5wlHa1eCaI3drOdOtGOzgDsoC+2S0/AiA1saAIU8aJ5US9s1Oz0AdTMN4Oq72G1Mp1rButwcFaXA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.f35b2fd7.0_1618513794172_0.3226991911669812"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.11977cac.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.11977cac.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.3f342c3f4.0","@material/mwc-base":"0.21.0-canary.11977cac.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.3f342c3f4.0"},"publishConfig":{"access":"public"},"gitHead":"30cf21833b011fd8946bd6853a20341579b79c96","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Vxj2SKmMXvfn6fR6vnKqQjAFry0wL8MAJOCPJhNThnJuCw29eUaXacDhIHjHEoYkfB675hmokxPYnnYvrNr/5w==","shasum":"ff2fd3c956bf89aee307bfed68fafa8aab45b694","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.11977cac.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeOECCRA9TVsSAnZWagAA38wQAI92EUelVH+ruKnTFz/k\n9/KY7RJ077XpgNdUapXcHgOE7+7tGaDZWvWNvIn+EGh0y7h4uiRoQvf6CNQx\nxm9gqk3bzLoJeBljQMk7Wt+mzib8FSJKUb25Na0uHUEgd0PiORTZzAh/RJoq\nwXEETw01Dbpj263v4WMMTPvAUyRASoPu4KQGPoes1yhd08XeOhOjSnrcsVI6\nu9fJC+gwkfXRaIdAQe8GOdxN2Gf/VySpLkARdFrUOh8e+JNwFv0dXHpMg2qq\n7H4cQlOnUhL5z0J/KIatoiKcLmTStb0eQHE26UVlIyMyKM40ZKYr3yh8vXs8\nrETlur6IdbmQeMjYWIPMkN9ymGU1zKV1NVxWoktDKkP3QYNHIKZ8t0wata9b\nH0Qbrof0T5SecE4l6Qvub0njWn394hvJ86Kj/y436/6Hkb3GphpvNUAxKBZO\nyBbCsp7VUi4uWC4IgqnoplyjJqlysSPOWTBfQwBM2cGOW31xrMKmMI7kGrVH\n6whH92haeDLS0svjpaNJRLR8GoTa/NLBMlVpcrRLaaO2BCPw0KnkvGUrpVYO\nNX9teLg4ss55ia3hrxSG9mv6oZALzKGLPj6yENN8vGfplewgwhQ0FOcsKWrN\nW/WN3/MrvLOwVA1RLB3gwnhhSR8qwejwYSAUK+oXGeBnQ9g+1XfAJLfxrMtp\npNRK\r\n=1ZM7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICUogPEWNmzzL9EAmZ/OY3P49lcczPWCKfikeTlbYLrbAiAh3LGdZUPCguJswPG7TRU46BNZZjvnj0VtYes/l2pjyg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.11977cac.0_1618534657691_0.8421414376930314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.018ff45e.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.018ff45e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.cad489689.0","@material/mwc-base":"0.21.0-canary.018ff45e.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.cad489689.0"},"publishConfig":{"access":"public"},"gitHead":"4ac1a4ee2a06e36457a8412629422eeaa91183b6","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hRzhh/Hs2wfmftr2OX09fXmpi1+C9wvZqJ/LYoOSbXAP8h+gcmWcWN0s3kdWbtiOI9U3swH876B+WREV3+AJDw==","shasum":"fffa68f84159e4c375e058661eafbc0ee2248792","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.018ff45e.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf26CRA9TVsSAnZWagAAQKQP+wcd4AIZyBjhnesIKIwO\nBR6cA3927EedunEh+86w2XXqqk7TeH4tO/uV3Hd+6tXChty3ah0hcHVFHPiQ\nsmnrtGu9qXwz+SJ+ZRP0GlVwt3eVGHheFgbiRJ7WIHKQoz7VnJeBAwhStM03\n5OxTmC80h6Dywbj++exluamppzy/CRMJyvqKfD9b6VRdGRlwppQZZ/5AWquN\n5ZRjWUMqOKrszg3JjqvZSXidT74O4HPOXERF8YbQbYbwJvkpruy6R9esIYPo\nZ+TAuj7ddzuhMtsXiIwvhQzSvDBpHEDHlF+9AoOFjbS8+afsA60gbh01y5Ck\naznhhaGz0rRmkYZfi7LRgytn0sYTVI1J+YylzT23rojULZNaitoLWTNTK/T/\n+p7vK0oR2u50rP3efmlAGfzRXbMM9RmC5g8hwbmn65YIZl79vynE8ei4X5XB\nkSXwg9OalZpxiHwyw7qmWuSpMd/e/nIBCR25tDwtW0Flv7O0o+3zt5VZpXBq\n8jSRjit37VmmKiiYuqVxNv0KnUn6cBbq7bkDAGVJevhnrJb5UcDfUwwUyevF\nXArgha24UxmCJYEzUeJm0nx0CWwy5Zx5cE//ps90y+0ed0ofV+SwVaQeLxsT\nQIYYnCR+0Ml0CmuAY9V3c4YRne/mxU/ufR0q+yFO9+JmJqRzRgzo8dK8K9II\nVL6t\r\n=RlVE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVcDXQ/LX5bjfkq8gBju9O/SnrNh/NkcwRtKu4qMmVyQIhAMuW3TZx6vsH6JhNKJhhxCTmL6VFuRlEgR+4ZK0ccWgk"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.018ff45e.0_1619131833635_0.2912889193972372"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c99d1fa5.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.c99d1fa5.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.c99d1fa5.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kXcG1k+mUTeLYclu6cHgMOMP2Amnofr/b3A5J417PS7vgpFsTZQNDsUAnTAb8GGM7bZcoAsxBPcZ7TkgBEWTKQ==","shasum":"6756af230e0437a284975b9d0e26917d78493506","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.c99d1fa5.0.tgz","fileCount":13,"unpackedSize":57701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxiDCRA9TVsSAnZWagAA9NoP/3y25OWhixaezYfDId+2\nbCXLn15zBqRZw5YZeFkwOX4PwiocA9u7ylJEC1P21SHqjqYAkmHN70d/wWsT\naGIKKg6IVskflvMMYsCIqn5LG+9Zn5nylTN/WHiHw9BQHGJUofQX617+XMIr\nx5OgnxURNaWoX8Kal/c1AjLzn47e13q3DBuyfzw6iFkwrQ5zZbs8Np1iVvIW\nVE7XDfzVg1ZSL4HGAtya39u6TlJyL+aoCNXKPMK7ZuDydHlcua7QiYTsX3GG\nAahbxo5QbcjitHzyYN6UG3qGs+eNzYR1v0mC6+QzpgaydRSsBm8OGyeVKbZ9\n2WESASfx9aUuY3YA4SlAxCsx7GFjIMFHGKZ4swGxIwfWMOJ8gqSpeTtvH89j\nHqBY3NER//5EPQRpvitomlxsREv5ZitIhr5dWAF3eSWHfvAnNUEs6ixG6/Xz\nlIthmbtTY4szz27eVSBTM7pUzHPWHugB5j0qxOczujpt0QvLjfZAY5hlg4Tx\nt59i74MVPWFvusLB3WjhQBhlXdDfixySYvAzXCMlcTCSUKpAzxGNsyI9cLeR\nX44rzHlo7BnVQDAfYqYWNYUOK3MKh7J+znciDeDyiJsjX9r1nC8kUYJmrOXe\nrdc7cNjoLh9X5WFnbvGUWxF75XLanF43QiL4dqAS/U6YbCpFdBH2xiGmgIJF\nfwJB\r\n=Jzhk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiIM/eekct7h1ZmOs1DeLVTLMgcTX4pSTJQSMvb4mrjAIgMEdinUm8lYjTC4U89D4Vg7u1DQ+uoD7Yw6De5OOd5Lw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.c99d1fa5.0_1619466370990_0.3936114958000252"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.eea9b304.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.eea9b304.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.eea9b304.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"5446efe110704f4464931aec816f98b15640db03","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cgW3vp89yRNtxWXhe2nAJ5GDR/WiSub/077SdjMcumkHy9BDWs2gAOncNn4SYfs1Edb/8FEVYrQ19HUv9Q3tvg==","shasum":"95985963845ae4ecb34c558a6d2aa0dede694dcb","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.eea9b304.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJW5CRA9TVsSAnZWagAAJQEP/3GutHj3DIHDVoDYOjKX\nqUNpWOBSidPFr4zYF3zyhmxUq35iUGbcBKmym4hQa09utEbnnWOFm4pZ32by\nYIiI+EgTrwQ/5VioTggWbXWLewng1Xi0JXpmVuC9GL15fbmm4vrwQopbUnFT\nii9LRIKDZlFzTyZnO+faa8uLW3PJxtXldHh1VW0odvdruoif5wipqJ8/d8OM\nsyAtp5eVToxzSkdIF3vzZOr8mlf43gstotSh+2F48Y+4vjMSrxWIXt58wnfM\nAumGmAVnyuW12mOk37USsCutEFU8iWVLPtWTC2XmevGzrpdYeVG3tqznCU9X\n0xG7rkduA1FWcYea6efWbUMxnV1ZUBa2/a5S4sfdjNJy+xAT0EY5YAPRU2ab\nWy9PRycx2no3yupFuNMfR/yfJiZk+IBWqqt5btnTrUGSCm0umMdQrL9r7p1U\nCkjhEhCK5djZctLFmw5CvLXIQkeqot23nK6yF9i9pa5d7v8Q1RenS/fqrQl2\nRgBmtnA/I3m0SxnWrruozglIu7T4n8MrHvlezCy82hEtFKz4wakT5nVJFrsi\noMai4Gwupe+RzAkGkL0+FHuSPHlLQ2UXOMwc3D/q6r1Prh3RKPhorAVo6Q2o\nyj7lWry41VXBQLbNyX1+ARDA+WgK3uy7ZEI1twutzWAGZvtW/HhMSTz9bNxJ\n/29X\r\n=Ri6F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGWsFCOKO9Vno8FyvXGBb6EAOIfPvW4p4sR5kdebZsz8AiEAq7x8Loc9zuHaJsopMffLtF2gepfjguZCmu7LslE2Slk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.eea9b304.0_1619563960774_0.7103756620282919"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5dd85d0c.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.5dd85d0c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.5dd85d0c.0","blocking-elements":"^0.1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"87fa4ee3a285fecb598e3c37e03178de68d79f7d","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-34eZa1zwZnDGrKZrkk1m0MfM2HIZ5JFz4aAXnW3OBkRcsi9v8yjrGhHLNRkNWCrbYK/Al0KZOzfejepCMgV0Hw==","shasum":"8def18e66d284a168291d50b1e729f9058f35c63","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.5dd85d0c.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKeaCRA9TVsSAnZWagAA/S8P/02zDPFE9MzLK7L2zexz\nh+zNUPGAWbHuf6ywJsUQf9WWmM8o0jD8+ZQtPruYlT7kWEIBFHERaxF42xIl\nwJXRRtMAPXDGHRMIzMzfteI3MAcbxUMx6mJjsEWg9EfkdAXiA2nc9vv27V7/\nv5EbPv2c7i6yIcI4KNWZn68VW+P5rHCgSKyuPChJDALMQ8LU57vdw6nF/+hJ\n6yLOyeeyuJExXyw2WIJjWZ1iBJHTQdYnzSMifShcpWCm5IbRG4MOviyWgIaW\n4zJORgF1LaICPQtMGvwRbJlwBMnLXPdkaQqIZWYLUsZFrWgHpcE7nNvZfTvD\nvTtu02FDZdc3bYY8ce/htjSJtPKNOQMtARl76b1gtKiHccaeAz1PSFv2beiF\nzg3NRlDD2LCHdRVDxhRFfL/6u8RpRi40ErmQNpJUZEfStai37H3ObcWaIlWm\nwUCe8f32XjyvDD3zkcGHBLOsIzRoZZVaY53rQpKFaW+ptCj4l99v0Uin+dru\nlHT5vNzKZlxYlXps2cNKS+IDPsegpw2cR0lSszxhphVuT4RVr4PprVw7RAdL\nyZTZwr9pE6B4Cd/tXuIpjBr9DazQ/Snq6YHD1AZe+vq2n7cE03D852PQIQ12\nZtyObclLuvLaGrgve27tz77TMjYQRS6EdboGay3sAxUW7TpvwtTJxHnXqAVh\nA0zo\r\n=0MeE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtAFF2+OGxTqOgrL6wjvhq7D1ZFj+xjbVW+N+Z0hbLJgIhAJCX47Fd/AHzJrvlFHluE7CWZpo0wpGjxgq4XYsoot6f"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.5dd85d0c.0_1619568538017_0.9722762303523809"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.cc813cff.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.cc813cff.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.cc813cff.0","blocking-elements":"^0.1.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"2505c49d16e9b978469aef456cb53e6d6b265758","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SWwATasp98IqSbmlqsCBk93tRE+yj5/cFLFPfChnJ1IozOZaKPR8CYAHWvG/PZ17bjhMYa+UIwATpkYwSLroOg==","shasum":"9e3c3fa6ab17607a15941aca88be4d5c3a485116","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.cc813cff.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHQ9CRA9TVsSAnZWagAA8BsP/1AHA1FDZ/b1T2ePEZd8\nDx2BURfg5jiwi3ygerot7Oy+x+Y+o3P53Qq8KEPANXzUl8W7SiqwsxK5835w\nbP5SBFq9dcSqde84womCqwnAC5OGtx0q5hvzGjqcDi17Y1Clc90mvKv2r8T7\nH6J37P+eXYXhYDFfmrQFrgPa18BX8/wxvINyfe5PGst1CljeHFyY3Faoox9i\ndbqX8Oi/cSgOQ+UxhK3Exx71bWxrA6Sm33uPuaoMBaUiVQs0D7AHUBn/d3e5\njUz+cbu0FP+n1p0SCdkHVp0OM2B25dG5dKuMVlr235thpnH/jo3tdPwVSJ4H\nDrM3SO43Ca6OsRnxpznrZ9HibNJUgjTZN/vh4cBj2sFoozuU76vkg5NLysHE\np3O0hc9U0JjHyvlf7/bD6BVA0I8c0aT1roZAlVkg/Lqa6JMirGkKb+D4Cbox\nB3vCKzaKQRoLP4Knkg4EETaPDnY2yhloopwKzoy5zaG+xbyYqpZGzYg20hqc\nGLIjU6c2cITFQP2/VMLszWJ4KW/qeTR66QTNvxdKkMXsuigce0YVWIts2Mg+\nHetiKVIbZkVQNBvcS6GvlVAC9l+ZOLuusToCA70tjz4LcrKOLjG85K2a5KbC\nd5KP2zG1FvFFC3bhyQauQ15hrZeRgpuxTkyDpQGlHw/mHRpEpgWyZqdXhkhp\nf+kD\r\n=+5iw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHGMbwWZMzohdNB1pfKGEKiPsiM7zedLZ/ZNti2t6/2+AiBDr2Xf/jU1cCW4UQlVVOC01eyhL7XrfPLA5qFVfk6FnQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.cc813cff.0_1619817532766_0.892324439610815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0875e898.0":{"name":"@material/mwc-drawer","version":"0.21.0-canary.0875e898.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.0875e898.0","blocking-elements":"^0.1.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rzvMDsW6UJo5kqPoSYDNTFlIwInBSA4XuGgYdiPWy5/vQOzNbbC740ef2QDEMgQxl2QDlfeTqwko2sE2WY1qkA==","shasum":"2c9262fee8e4be042f461f5a903468e379643ebf","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0-canary.0875e898.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHYjCRA9TVsSAnZWagAAhUoP/1S4ZqHx+8RGvZ6SWVJH\nmEYN/vxOkReA1KKUWTcGkwFFgzj60Z1LpAKYU7izZzL6lY/jUhGefc1dnkJW\nRKSd5c4UiyDzYq8cSeMh8ofepJScUGqOBgcGjzbAPCCknICcbCOsc30FYmkf\nQHOwun16hIsETABUlG8RUV0ZPqLhd1QkqgLbCGg6PmQlW3g4dixVAAZJ3Dbe\n3AiCxRWGCEMd47ZEw6P8m0e4DZo3uJVe4HfDj/N94hnYWWqgd0cqZpvs3iwd\nAq2OQrvbSWHBbr2PmsrM8LJU0BdEWizUtmofpRE+IXnfme6fpQ/dYU+HPNlL\nS5d5wOs8nXa4jkbIq4Au4ZymNJxviRQ/KPemosJpBn1/mysAlxG4OVS8+2ce\nviwcJ6DumplYRRMGBqxTqmEHQPTvWWBeLXDUHLx4UXXXcz70MkQi4JjV4KzD\nnZIQyU2ETAmRFXByEy3pooMyFHvxrbXdrt0u0c4XvLaz2+WYcLUIAhTHoRSN\nqUpT+dbtYbWAQ+feGjVowQVlPQBijuOd4AEGKE2YeXPByXanoSLCSieirUcK\n/FPTnxdI2FYcG0WR3wIFS/cHEXHqcI7s3Lo1Vfk0wO3tMZmMXx3vF/AW9+lB\n7PFzAe3qp9kICR+EH7Q7Ezkm9AWgA2sEOXTcksIMkfPNUZVPEQ3ZOdnyZ+sQ\nZJY/\r\n=3H0/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCppCNiF2SwcgF3ppc1+6z5Hoq25LyQWi4mUDDg8+wm5QIhAN8D2l7QSXur8Mvtf9sv4EfcPBKb3ifpGI7omorEr0bj"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.21.0-canary.0875e898.0_1619818018719_0.5315655801531416"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-drawer","version":"0.21.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"^0.21.0","blocking-elements":"^0.1.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@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-drawer@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-X8fWIm4XgnJc0OZ2gHfPP/EPvy00U82raBfM/ASq7MvL3DCNLazYeDLr/2GcgCk/voLMh0sVxW/Kpo4SxI16GA==","shasum":"a67a76702fbdb8ae93e6d3f322920bd74296dfa7","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.21.0.tgz","fileCount":13,"unpackedSize":57702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmLCRA9TVsSAnZWagAAZksP/0eaODcRwqLLkxOyjL8s\nSh80kHacvRlD1nEez3Sip8l+JeEgO75j8Gew2eHrXA3YfI2om/44h5kyYpYF\nObCSLP04TzAM1keYKHIaC7vqrdoLyRkYZ9e7j/2lVtaFie5ysWGFoxUyFd0j\nrdDUvKxP4DC9YxSeE8w0SZNcwLFKu+EfSqs4GUHgU/2uYAMsJUrlY4OgnWH+\nkNDbT5/RoRWB1nSaW0wwNlk+EDrGRUrJ9Xo3wPPFFaSb+BXFcvr1ZrrjCrH9\ndrOl5fN1m+t4tG/nv3FZQnwDTNe1FkAaY6RyfMovXmXjrVFgk5HSrBcphsbK\nqKkamOGX4yFzdzBZCo3WR7A/ehONrGF2JHJ2lt1qINFt+xdK8wff4zofbCi6\ny2ll4dtC8mARgfjfFbxB8V3q/3yGQ4ltBt8wLR+u5dhCwGEVrFisXSfazhFq\n1O68y5Mrq0xUWCbUvIFJtLjQ7JEPtGBXXCXO+88dFnu7Bd/qzUIsWjihEk4F\nJBknWeFxREdZyzqxNe7Rb+FJx1YK6r94Rzfyzy2h5Jk4NNrcbgybJmiT7KQa\nv9vyq8V9ySy3xEBJp8Fajv90fY12V5wz9BbUjszKNPs+nHM951Ts4rWprXmb\n7CUV4TeTay8M8p2qdcPM5VzUQw/G2xT3Vy7rJUFY5sAH6MF6l+LCchatkAgR\nkTjd\r\n=D0s+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC/1HAqHtC4Emt0DjOjdoRacgeAzOLj9+R8ypIREpqxeAiBTQzDxGPAda3/xMRwuj4RflOMbCOqPY/fuUgFN3uiVlw=="}]},"_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-drawer_0.21.0_1619827082547_0.7195569187528308"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8f1e7e1b.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.8f1e7e1b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.22.0-canary.8f1e7e1b.0","blocking-elements":"^0.1.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"346f8ec243ae13b28796324e6408721377829b39","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-k9M1Vt6ZKqQ2GnELT6eGdbWSZHmm7JOCsZ8yGb2zpYsTlBTzIKiOf1zFX5tz9hWsWNYymfGl0kI30IKOosi11w==","shasum":"3d928daf0e80d543b8ca7bfea10dd15c3e57ac57","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJshCRA9TVsSAnZWagAA4rMP/0A5BCiO9yRXTd1qFMtJ\nCc9RGPv8/xgP5tw/e9aZ547iTymVrCcZuel7T2QdQ+g4nK8v7Lw3H+om1YN8\nNXRQEnV3NXWjniVHEYe2mvOVicGGCcKPwk6jeFjtS58kiwpZxK+MPbeXku1G\n5h/OClPI4lxtKmoN7mILm6U85VLvQaJDwzFUqNnbYfe6jg1GPZWC7lsHzgCQ\nTr1jirJv2qFHmin/dBfKKSlysRnQa7xp9MK9X1K1ZHCrkEyNfn3iUcSMHowY\nD6KOocm24yJr3pOhVDjIJdNy5l4JAmxMmZYTNRDnogPQun7dNSZ8pr6+Slae\njJJaKtSQ/QBjOGixiWNgffwrB0tNE9PK4dkVISQlw9JfOViHQwvxzwyM1tiJ\nOL6arV8le9TA76fNkemKgi54AILkEj+ygcOYPULy2AGqPIKRxuSxI7fbVv6f\nBv97JQaguFPQlf2liY1KKbWDqvh1TWjiEtsPsVz0e0JTMBFrGX01hit+J0QY\niOkXZ6Etrvh1xT5Nc5C6qec2tybGNIpgwT9332sENzu4RLVB7Fv9QYApmQzf\nvocS3f+2eBGUVZIQnIerIZtghx169f3GtLkhYmRh023fBsBelmd/DLNuv7TV\n3T0+/1JIFS4pQi9mpguetAUU2MpDDDqip+LmdCoEOVbAsmkAsBtfpOM+czqF\nb4qB\r\n=9uni\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBbaqTySItzXmgOhH8Q0cyLsmZSUyG1hoQKCFgnXVuCjAiEAvgZJHz1srcMcZ7re7zJPN2MgfS6eptLhaXTUW3pOvNI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.8f1e7e1b.0_1619827488663_0.6273747495108908"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.deb0e792.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.deb0e792.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.22.0-canary.deb0e792.0","blocking-elements":"^0.1.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"7b8ce494b86ceb69e799a5ec1a9f0148075d04be","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HvoTivdbBzVfPGfveBDqbOVPA1zvmMVQtHh5PIKt5moEdH2dd84/buIGv/4/wDPzBd7nNMey+IDzejE/vgq0jA==","shasum":"af8892c36f14324d099fab0f672c3fd22ec06b1e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.deb0e792.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGw2CRA9TVsSAnZWagAAxw4P/RnPBMrEQZKY93XQ+xg4\nDFmQjT59Fvn3AvW1fZeKuCh24ywPKaYjtE2uBKsgIRDRp0q9r5IYHZh3JOJI\n+73NipPzJURJFCyQbcAQwJDpTdwMmPGoaFDsnFl3KN1VvJms6vTB46zA0qGw\ngrUozZygTV/W5cV4mPrz0pY3pyCX1dIMBYUpyNwU8h2YEEQWTddCbDUanrgO\nGYxnN0O0ZMOo77EAUeEaclFmToJ2ycP65xgAyB0jrabqYB3EJU0+pyWx4I/N\n8ivm9jrOdbtvUbr3TdfOLjU2y9pRhStlFAhjgxGQStZo/LFw6/L20VMQIiH5\n+sVXxMGokqJaXss1AJz6dm6JFOD55HB2uNCh/qTssaSmFmV4rG1G0dr9Nn0B\nk8fcVtGsemVQWF14HvP86UH2GtqHPCTg+3XYx9gEn14wGagf1dbEreO22JFH\ndN9n9Gr+1Aym82gOW+VszgbpiW4k/JnIiaX+dynirzTaEnavTM8y0srgyEQ9\nXGjA9qMp9HpBaD2jXum334svbpw+vRZpCBITs3wxfvcM0L1imdWrOozuLy5s\n6ZnHsHrmg62WUjywS66ph1gfk2vIsfN0DshkQZOPUGPut6xPsQkyQxriYlBs\nKGD8v5Rte5CK7IhQqEnvk1Pnxu0iIiy43YkVTfGHShuW/6qb4TEmK1McocqG\nmme6\r\n=vUz2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA7vQ8Z6zuHGRJajycrkGvlpQjMWUrRLK4SnjfBBLCZyAiBhDbVnA76ZNWj0bDo8JUvjChw66VVbGx5x3GqV8aPGGQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.deb0e792.0_1620077622129_0.559349964551711"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a3ff615f.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.a3ff615f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.474836ad0.0","@material/mwc-base":"0.22.0-canary.a3ff615f.0","blocking-elements":"^0.1.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1e819eb3a7930649e9ccc58d69e42d7d17e022ea","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ul7EPLdMbj57GAncoGvy5V1LlTG9DpZ6gp36O6iNz2THqt+hWoHRh2o9H/8J2mT+TEzPWQHBDB7IK6u+zc7ZUg==","shasum":"7ddfd95b97f1a89965d254b945a0fbb684642914","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.a3ff615f.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHomCRA9TVsSAnZWagAAE88P/0gXEdA1OmPK566MJ9y7\nuHbhCOoR2vfKFnTFb624qmIB3Tb8MuLfTpW+Sap22DQflhlxViZ5UKcVR3fG\nY4No7lO/X/0LgYvLcdDpl+RN+pWRZ2Atr0RB25emqBe81RPTb8r5dB2/CCs3\nd336QzzjKSQIdyixaYXcoQR3urF2I3cx1cmdwfDNdt42Fzm8U02YMTf3h8ji\nY1Z6IFwdWp5JWpA7QaTYkcv0cMYmCs4fzUaoJ9KryvIXCVKdrLnQ2YQcCMr0\nUDejgdWo8tdCnsBIdMawbZyVSApIDzgejZlBM/w4ahi2TggBIyQqYsCY335s\n6es4sO9TOTn5D90OmXtqBtJEQbTP5BUABjJY7LZrLu4b9SlZWtYIx2BJbvbd\nsWFp1SRYZqZ1tKYdrro1U6o7gEi/YztDHtA1iEOb+i9IitpxAmmEjyU8vT67\n8BlbKjRuc8DyBIo0iSXQtTsI+DukfarRUJUkSH/qRX5serN77CGYivIK1wl1\npKaRWXQVqZch5PE0/hYQX8/mIW2mKBeELsw3rYsefq7p0GoV2u9MeB12DDWZ\nWFcc9B+LacF6mOjipq8D2Dy1Vw/matIMPczPwhasxfmHBavtDqi6giBRw2EK\nECRTQ/LjH8ILjj85G+DVjOmjp5kziUPvy1VZl6sHnzTgaiJ9WZHI4nVNSrgM\nPoJm\r\n=/NqW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDRZnKkb31AGKLdsIwXTQtuVDCEfAymvIapJvTYigS/AIgAQPCMTs1E1lpGuVlnMujTXzo27rNMoF03mlvPRRy9uY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.a3ff615f.0_1620081189992_0.5954930402919161"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.948ccfb5.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.948ccfb5.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.474836ad0.0","@material/mwc-base":"0.22.0-canary.948ccfb5.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1dd7576742ede6b9f763d391eaebd31ce501ea16","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MwilUIDrB18GZTBEENvBWSi0cNfOwWQnS0okfp1s9vVfCQ09N4n2nKVZm4MjiVbrfkoMfslouRAcYPejDU5oWw==","shasum":"3cbe43bd8b38279a7002d4c8b8d385efe0ca5692","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.948ccfb5.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJDjCRA9TVsSAnZWagAAdYQP/A8JThhbzXPoSSU0Z1/n\nDaS1+BzPg7JXpwWO4BXcYHap22AKtBXZ3Uj7OwlLItzGLQc46oSQenksmEXK\niLRl+QTTSUKlF2mXVtPBUWLe1WdXiswTPhkHJnSLw6A0+m7LH575x2v72sRB\n+mbaM68xT5AD94OzA3q3nVxMpurLTRWoYjqreSr3F5BbdbIhJ9dNgBVRojEW\nH/8lsMr1YxHEBuesPIb08vmGuXe298EvrzxknWgAiZeSuMlIHmXk3dIfwkhN\nIhQeuRBx58alirJABnwgV6NfBUC2hbX8O79mYZGg0FUt79Rwbo0oAxZEgSQX\nwiiuzGK5N5DsCKJr823kaTXXVnFpblkIWVC8ELYHRQHMpHTNlOT0vR1WZ/AH\n3DR57CJgzM5n9GRmxAYIXfjhdASc4VndX/CPJSqdYd+CCRaENAdfORz1Jvb5\nqTQs7PJewlWCFoK/UCen2ma/VRPQPFUA9+AU+KZMvv2ABhVaadOLnh1oItDk\n/9JCcsSzJs0mK6LDWF28Z4zhUwnKyLHWvSmaUj9TEHWs/EyKilhYHn9NwQ+1\n/qR+YCHaVgnopJTxcSwpoYfomX5xzCke7+mergwauhl/IeOtAky1MkAv0fPe\n+4ZATfF2ZmKxuEhnE4panqFh8X3oGon1MBKShDsVG2ep22HwN7DwRbJscr2n\nvnji\r\n=2EJs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhIv7H1klbBDBxCqmH7FmQQufnQJJY7/g7ivuPtlrRAAIgRKsewGaxJ/KI1TYbYuyZ5qPD6yJXU4pnDEHV5WSHGE0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.948ccfb5.0_1620087011351_0.38381974755515724"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.9f8337d7.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.9f8337d7.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.be999eb08.0","@material/mwc-base":"0.22.0-canary.9f8337d7.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.be999eb08.0"},"publishConfig":{"access":"public"},"gitHead":"c25dd9ae2c04ae380f41705f23786ddbcbe29456","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-z2gGVRzFZDq7fEBYr88K0hfeRQQpxQbzhsS7zvrgn0vgI4MwCqFsUdfUL/0vk6JoiDmRNeOB1v63H8GCQtuR9w==","shasum":"0e3fc6008e6811d261fc785be051cefcaaf4a2fd","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.9f8337d7.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZQuCRA9TVsSAnZWagAAAdkP/1CkDfAOoP1n2yVyAl7e\nF3IKWQ2KLSYd7vPcARKsHQEZZE8JLfcbU0rFuyINhJbJAyfLgqj5TZlQ/xH9\n5gRZOhgkKeuXJAPI+U2Kcn0/l8cPFH62txxWB/NqopWpzLOmI7Vq/nASwO41\nAdd4mqbaBL37/7jaGEm/x3+0gpq5QphNLgHh8oNAZMScGc65euc6S2kR98QL\nKS5fkPLQA3GHwEu9dEfznvniBpO351orVD0TdDX1YyC8iB4qwJSo47M4ypAP\nhIdqej/iqQkB3x1WtiljoF5S/rJl81RvOErFIKnytkzXdJdcgHh5wwIgg0W8\ndF/ESn3C02h4Bk9GDgysZb8EwzEwfqzGx59CfVdVFhVGcIumKm1/AoNlcShY\n96uI6iJfUg7VjDzmtvYGbk348iL0jzxcECKfDW9ByB5u3E9GkKxfEhDTKXJX\nWjTvQoirpu7XD5FAW1dHwnNkWsNQjAvABC/jZw2OgAlpS3ET8X5VjssjjeJ+\nojK9wUy97OCTKs/Dq6UH66R1+JTvbDsf+d+Vutmy5UcVCHyl74bWWtJAXm4z\npDtuF1sVxxDQPAXgqNwGUwaFMMz/l3D3bZ/gRt6JLZopxYanwIKCVF2wzqam\nAK4jl1dmiMF2Y50lBZQCweVzxqzwDN6cJVSdCtn1uq63jEzUAKYRVaGEpbq/\nqiiG\r\n=ClJQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKZ6++9ZjG/JuavlLhiQInkDOFkixHXkGc9ZmCMmIRvgIgAsh2l/xXn1OVRZMGqd2mTShTlUJ2Bv0vsplERbZ9HRM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.9f8337d7.0_1620153390047_0.3161051328545956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.5813480a.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.5813480a.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.055d4f10a.0","@material/mwc-base":"0.22.0-canary.5813480a.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.055d4f10a.0"},"publishConfig":{"access":"public"},"gitHead":"293298dc0704d114f85fd245f98ee8f21a3ea348","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qv0dmR+g14KF+yJWRHaHbJaiaT6QbgF5BQ0BX7rNOiYbFBdK5qmV+m7DGwnkVEEmxGXP5uvoHxHbpfDHwFJJJA==","shasum":"1009a228616260401946ce9d1cfcd0cce0937db5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.5813480a.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuL0CRA9TVsSAnZWagAAeQUQAJCvN//adc7mQMibKNTu\nje4kAIISrB6yhOqAT+Gs3HGOZ8KxZn/480R7yiIAmOIpgw1P7+IaIeT8P3pM\nifizaeDFS6ATSPC9pi1sL4Bdi9Y/SG+cUlEzmBSQASkW6R2TF1t/DBL89yMw\nSr1NvgvPTsd6yTDwYAKhwElv54OaxcWU1ZY22SHEWpJRCdUThjjD/FB1Wjhl\nsOkHdGxfhsCziVdedYN6lgGs1Ckm1lonkGxpFj4lW+ynYP/O8iPqhOqCQbpR\n4oXMt4qWoJApY1VmLbQfqHPU31MqMODcOU1tRAt6o4jCor/uJCZgL14lOYDQ\nzJPs/yxK+6sqKo+al0z2bPo7t9K5rVfvdkXQjIyUuY9UTJWINR10stdM+Uv6\nLEfc30cAJB3WUCsaCKJ3f/kg7Xt3SaDki0IHupRgJFy7T4hNfM/95rGlAikj\n9wBa0RJGxUN5sAJw47pGy4ZGiUwEpdurU7pqq1H8gfLgH71XEZKB3ipvixXq\nvoGE8twCavXCRsTmOs9if1BQmVRbZQKu0fdrbwYLsG0eCnZwrlAVxB7m4Cr4\n7b9KMWli5ohZdaAYcsy+epBxjUxd+ZYHChyX2HBXGXXpQoKFLRqXlqmM2A03\nHq5ruNB1GyKvKwo3YefByHr10am3eN9ilBF2kCn6OKuHLLXJI5mNvIcbT0dP\ns98e\r\n=pNAM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAC67nsVBWOKVrSHgY0OBkqHoXsjCvJnGjlS3eZ9eClbAiAk5i89+vTKhbSm9UNEqEXczOqFsufmJvbEp86FmjaJAg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.5813480a.0_1620239091925_0.1294908908843091"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ab7fc1bf.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.ab7fc1bf.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.03f525f9f.0","@material/mwc-base":"0.22.0-canary.ab7fc1bf.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.03f525f9f.0"},"publishConfig":{"access":"public"},"gitHead":"9aaddda989be6b623f728abc86d48adf169d6f69","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ObIGT2KR5h2jmQ4FsIZl+mM5dIXbE9XaDGw+sHrpYoWPqEpxxpgMAHduyN3NfzEmyazAkXXgE9E6X6PT1uzC/w==","shasum":"25e0bec4c814390fa5a8f870f053817aa94af16f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC5QCRA9TVsSAnZWagAAvOIQAJz7ImaJY4mMHvdpMtes\nJWWd0SDtiRoQtOqK/9M0/07ieVqtIgTqeER3MDnsmBLo3MzvJ/Igw54/Ep5H\ngUki6pXdClFkmZ6DV6ocdtMZeFsEUE5tPHk0ifnf70hy1Q5Dq1A7niLA8nVo\nW9jQ5AnCL8Pb0u5JC79+sfiF7qfuVKkPuFleqbZXMTphfbSIZRGkEMYfbIAH\nM1Hqrs6pWeuU3le9Kx69sNPerGqTkXoBVz1RJe1mqzMh8Fy/wHpJLzYluO1m\nsXwYdFDl5SDyQ5k1UCFJ09cvv0qNARuAUKapIfX7zVnmsN7KxoN7QvpXrjlz\nKKpHqSOXx68JFsoS7DFBczW3WO5NqvMNJsSVBzUDqgRvNa9ezu0PYU2lQ4bn\nrOzW/DV6srZUk0oVI02IBW1dJ8w1+UIVAu3n/D/zq162XnVNQ0xH3j8QYLIs\nkueAK6dAkzgtbqfn/mlvAxw5iPJNt+CYkDdty/s8pCJVqlKdUhtRDte3i2wW\n6AygzSr8znQXY6D9+UpGkJSJKRrSCE6bVNxyTVqgwXm9vobTLKgTDrJ5vxyY\nzqmx1iqExwRX27eVbUujhdolGmhp1sJ/6BRQbP7p13ssmS49kvoGhHLKCTYy\naethKQrr9QXUXmZJ2QC3kekVNEtz5uoAoU1GG82CtcCGYwTwVJ5VXdqQz6kF\nQy6o\r\n=XQRj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB1cJ/FGJ/jdWnKgynlCN1x6NKGM4RylbUHJuVhcwiNVAiEA8CHWsr4c3QQwNo4eQeQ8ab0y+JyCr7qKc5BR8CFdXR8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.ab7fc1bf.0_1620323919730_0.5672727193449443"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.25693d60.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.25693d60.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.25693d60.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"89015755bc4d93aab59cd46274331e3a6c467896","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zakC/WEiUwb0GO0rFVyRdWbFIVA9wGda9sp6PkPX55Ed5U5en8Y/QCxl8kPYp/cM7AJGa7qqGOPinwHUkTL9AQ==","shasum":"499b83be311fb7949f645c6a492420513137c37f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.25693d60.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbdPCRA9TVsSAnZWagAA6SMP/RXXQjuRn9fa5Q/ChSon\nqlDRcoi/6yWAyGZKPnZSY6vr7D6ZAVoj7/QEZzO5cewWEhHf4WyaIEanfu/I\n04eRf0nAdzburOFI42zZYNsTfaWlkqzXorphioPPa15z1m6FPJuBbZOjLuYB\nfhDOY0w6n5AwXXokUmFxFc74Vt29/V3cGInV6c32Uy+WQJ2XBocPJvH7ID0h\nJ8rlQwNH5E7TTPDXO0vo4omrNBO8tKKb9Yo2BPqn64wl1WiBEWSV7SQYKtt3\n1euJb3IDjDa+QCk27bt+mKI6YkIwh94ZpYk7kHrpEye12TUIxymoUYyROaLM\n5vgz5j7KoSNjhyWk5LkXFC9jTCZgGIQD++8GsyzmI1KnuLnzoyGWHnD6MsSK\nSvUtjER7MtTyXpQIgalKWCQQhLYh6eALRwseIFfd27g94yIYeefNjX7V0VaF\ncbenWSoAFhpdRAS7LQrHeQ2ubQn0r+sqCxrAp3g/5i92cWweoInI8tmatYXa\nr1NyztrycwXhqznRz4peA3jixX4WLVe7mpM9zNRYb6xez9A6xe69ORCuA77c\n8jT1S9WRgT/3NJWm4ZTmVnzxNzWlJN5y9jLyOYdEAJfSGvBFgFSgQaEyhKPB\nXRPn6cSOfvju3BlWKDuDJEI4y2WJY2jywRXeag5XHeKK560Rlib/ikv6cFmc\n1ezp\r\n=h5Nm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAQ62kbMNO6Uz4sEyBqyeMxYhLx97zYgWxeBDP4zKJRwIgOPO9wyCRGZo6RpH13GB0ijujoqZvMc8CFzdE4aXjBTs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.25693d60.0_1620424527400_0.8356737631571707"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c497962b.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.c497962b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.c497962b.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"be15d892a32bdf28e42617b44e38b301b0ea590c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Dr2shp4wSPBYOLzrjliwZT5+2NWue8CEXOKZUrVl2+ZetNYhmJ52+e/5IXipdO+rPNnPBmpZ9eeHdiWyS9MROw==","shasum":"1abcfbbb3b4c6a4ccb6f8415c7fbcf7a0ef20c4c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.c497962b.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbztCRA9TVsSAnZWagAABZwP/isN9l79i+5Frsd2B/+t\nKx6AF45CgoZ5VP+YdZ166xCc7z+B8KFrmavIb1dlkXT2XecporWvfrE3y/lT\naPK5aGFCxL65mZzeXS9dQ84Caj04gSt8FF+2LMkPqPExboA1d2vmw7ESlOiR\nCXnYryl+r8t8Lx9ULAsYNN551diKpNmvr9/KT9WKPD7q1DjUhZ5zvtKmhlgt\nhhmehybad+io/gf5euRIBA8tlkUVTGrPwt0pVrY0oDgrV0z9N7KbbCjfX+mK\npe3x3ebIWTWvg0H2ECmdfNFfI+9iBCUq7BjCprAH8ZdOnPx+1a+VvSyDmD/1\n0dGLpOHfZKyDhtesIu+Fo2ePzSqhBMakHDxOj6OJp0Z78GzcqQ1gPO2Yi6T7\nvJ1HJfArq2on7HQ8jAqN1CgD+DADgepzvt9jwmuxjjKnC+WsbkgeY1ChHVfe\nMeTtYa6XYNbN+SoaK+4oMCG3trpXV/fCXkRBcGXA/DurpP+irMSSjxMfaJZD\nbiZiHqWrQOGgRNSEhzU0UW5UWNspb/TzfAMMwmuEi2K0pQ2JjBh2ZXAoJqDm\nQgC4/VaLpt1FX0EcHsIqfHI0zeZamDJfgOyPevSA7+oeO3J+Zgw7ezXd5xbJ\nUNqYamAAZyHmAqeE8d6kX7RX4xEwxmfdM1KrOnI7C3G0Saj1RSZQ9lORHrcM\nC3Ip\r\n=uEz8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQNmchqG+k6qwGgCZjBTcXe23GjWJ7Kd/Hfsm41CuyuQIgKS2nhEhd24ngErt5Mxn4DcgDW8GCvH4MiWwp7YeF9+U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.c497962b.0_1620425964761_0.7959531594709444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e300688e.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.e300688e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.e300688e.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"94ee5e4aa5987e14fc749785fef3b65b73185c74","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mSH3BSSHwYpRlqNreIqgChZeqoxBgLVG0yE2E7SNp7PcetOTErHSVx1ets5A//7LKcZQzG761x/JKqY6dPyE8w==","shasum":"a65594396f5a43e4dc6ca925a8b82ddcfa27283f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.e300688e.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb32CRA9TVsSAnZWagAAPv8QAILXCMIQ0Ox1CH0EEJbC\n6wAhiZwvMWwF298tTszXGaZqNAKv8a674hlq+kkVPjfJq1722rUCEPletdwW\nVLu9dUPaAhwzzD5d74XSSxBz3Hl6hA4j4erPw7SyTfLbwozhlBJ6IRggcKMz\ngL/b3/L+5JNTg9/kCW3s22Aw96Qi0QeLUbJsLnzVUkwNPqtfMNdhXl14x/VF\nXaDWJq3da1PlcpjFHyPNhHfJOg/LJDoml5ch1nhGJrrLsIL46PTvtgTyH4YQ\nW7YSbvKgLXvpZis9Sd04L3GgPN+t1zi2n2UYrmtneZvhGDBiQOK3RU+qd/Mp\nK5OOKCEgio7zYty0cDnRffpzNRByy/BjZj82CljojTfHtiK11YKmiUOfvq+3\nIU+wXXrhUj8lJSvOClLgwoIRQEaOvCIQnghHTbXuZzjZ1+D9s6B79D7bpHCn\n9hgTsf/Lq8wzWzWmKFKtZu0R/2mNReFgOZYvZmN6RalymQleGOwrDDaFt8ZB\n+PelDw2W8ANoxJg3ETX3K/HoZtl5Grsfk6rJsw9aWtcQmZiF/e/nsdyJsf2A\nQRMRm3ajLb4Tofbd2bZr15sawaR/Jv457IAxkcJuEcUNVO6/OlwS5rNFZiy0\nd/pZxfDGPNywEJ49Ob98v3yXp8/JT52uHFL5/AOEJ7Bw2asQJV+f/ufacLJx\n/mfb\r\n=Yt/a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHcQ1yfuP8M3ZnyTOQwQzP3kATty0QmKo62gWIq/Ok6eAiBnK931+Rl+Hcw1HfmWtFpwV8Wn+GWnX+wM3MKOhtv0IA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.e300688e.0_1620426230278_0.8793934448853578"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d70287f2.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.d70287f2.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.d70287f2.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"17a229885fc92f311534b89a9df6549e9b78c204","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-l73fO6uhSp0OEjoPemzr/m2JLq62EaKIevf6MzdmM0ZBu2johNRlisvb3/MIACsoUOa5+HkMrCYPQe5Aw7yqdA==","shasum":"4b0b0808fb22bba86c4d0a2cad7f324623ea8a7b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.d70287f2.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYlrCRA9TVsSAnZWagAAEpUP/1aiOvoER1z8J6izZ3BL\naIxfemGVbjQKqBIJJSwVJ1LbjwU8nd9byHBR5kchQjbHK/Hv1M/XySS2HoJM\nlsxSQbybk1E4q1/nubvmxigFYkhgatEFACNzafq/PEOFNwOxNLSlyJ4hLrML\n6KHX31jXBwnzS0WCt/x2aSPkfU6r+UayBL/xny6EGG0vLN4ZA7sTScYNuLfD\nAFJNm9NyGha4KV8t2xGLNp1+Mv9jCy7tqE2QfqNNPLvEI/Dcx8HG67KniO+J\nQ3cF9W9RzEqq0L/dL9RqW9+ScvUTzVek2CNU3XjSUiGxKYu8ZgVyBqekljl0\nFkN+Q47IYCXVv+fBnf4MvT/vgl3EQp0EDmpmM1zKArBmdSuk9cSBioN0zg8i\n42nWtLEOBOMfT6gVHNd9FzGvfCKDX7u/q9fneRn7nu5tWMBfHavuf5+BDA9G\nvlcyKvc7d/l4ap6FEHmH/94AV2Qi0UaurpqXC2O9SC28RZerpqM1iBgT6Z5F\nplChXM0+oPv/M80X9+5kXnLNA1TsKubc31u4pxqyt1WDNAbNAawsSiDZqLfk\nfVUIWbnrTwT7Yc5dHumuLT23ru9+sRz77S4MvyGYb43G8qh3Wn6TmTolAkfS\nuFdiWOMy+hPAOFNafSkaATKt7hKzUJxTR/9qfSyGyKrN4/1qSxFyfekijyXV\n1qmi\r\n=Daal\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmcfFQ0/DQjB/SovqCp4UfcdqOAdr7N5jPrnE+OiAO2QIgG/YyAtfXpHIW//Orax7/sgmmJ6Cz+uM2Siko2djz45U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.d70287f2.0_1620674923459_0.8682235390435866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.02e841b2.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.02e841b2.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.02e841b2.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"10f49288fa74318f178daebc0299b7da22137eae","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2nxUWH/oX4YGqjFwEDnhdOHKZk9cRPwsD7/aM3jUqQcHrIBFqgOOqN3Ii5a2OLhGaHr5/rz+3AB8pRnjqalDWw==","shasum":"6bfd4d2eb75c0b49269b0be95f24c7f63969a522","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.02e841b2.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZi3CRA9TVsSAnZWagAAkV0P/Rw4zlb+c/x4gXp1sVKk\n998djErOs65t0yhoZB2iYvRuB7zh3slVZJIvJLSRPBfupuEkDMMXHuEeYNdx\n3DOiJ13wwjORcEzFTsMz84w7dQsHjB5lk4uxeP7NjFOWLZ81fnMfyUzPR3C/\nAoOEPL8X4Y/9QJUUT4LN69NkHD9F+ilVzsR0ear4ms7RUd3p057ni7jzIIBZ\nkclP6I+i40Lxu248G+mvK/DA86zZMxtl8myKAmd0IN+nFjNZTyWg9avs/Oz2\nuIxQ+RETgsnJbYjSzUIwBiyrTKnPxIu1qlUbt2IRwsTuRioERwgogn8m2u5Y\nXSL8b/WEO7hMTfrMxXUp6IyqUz852WFULZqiWBDxQaFsSp8dIQ9OP8hpb2aI\nuaVIqbtx2RoveSY7mpmdW9RdeRMxpSNFMFQEFqaaVA3+9Nhp/tnloiUvyvyV\n6ykBLdcCBpH7Tz9BJ0x32SdQ+UhE3t1AFYzwrcaAGL01fJW7QhyhoRQU8xHK\nfcMxFXIJ8WFczLxpWxZQ4EzU7hEVVWo0IVSyLlbOmBhVhrKD+Q2Raasg9dMo\nKIPL+wG1c93w6oOdjhiAZJXo6VbQmUTxo7hJrbTTNLes1o8kFQ/iQiz2cvYy\nOPsUJf3qdehOdxK342cM9mi+1Mr/r+lgCwDeHxYUmTJQrXcWoPV4Rnp8UY/f\nFwU1\r\n=IlnB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA+5WdlLcSG9Lq+JqiurjxZ4r/4Tloe0s554RmF4I6oPAiAbi0Vb7aqbwAyhtxg0/pBIkzKsN+CHv4lESvID4OSuHQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.02e841b2.0_1620678839302_0.6791953496756908"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.badda2f0.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.badda2f0.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.badda2f0.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"961b6b76093a7229e8b8672e9dba3c2f9af0e61b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-o8hJEZuojVmPhSglUou2B09aTw3GfSAJo7HSpgCCJbqhN5k16F7V/wZ5ezNJ0QwVhXp8yvmPkVWBaK3OEV3lFw==","shasum":"cf80fc6f3eecf6b4f8d72fefd3d76cca8856fb80","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.badda2f0.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdD/CRA9TVsSAnZWagAA720P/0wAkrFC4W5RvysAC32G\n9x8F87zHV1fR0DqYQiJ51d/kZ9XU5CdzTfTr+0D9NMSEVw1LrrRFIw9swWdA\nNMtKFp/PgSJXS0QRK4S2YIsv/3/NuEkmvzHjmUNYhIQh4B1Xoab9uDGpuJAb\njVb5wdPi5L4qgzqeskkjyzHh2ecaSwwlcfONd3WlO+eNVzPkP/CX0HdBFV3x\n7p93ClcuPvhEFN1tX8Yes5TBYyn7f/b6/eQ8PKry2HDPynBJw5qKlPZiyjOd\n/SB7wcbWsbVlOZMwZ5dxvHfyyZIYhUo9X2w95/3WQo7AF+ZhksXW/q8JGjXd\nwoGhZfZld5T1p8iakahstE2kJef9secb4E/smX36O5sArIajIvcHDZufUdJg\ngmZ2A9pvQMquv7NdyW9lO0B3IIb7IULDD/pWXsq4MjrHehv8hajPKdd5OTyL\nLNLZerrVzUZ1i3xpqA930vVc940anHti7E48DXfp12VEJOVEAPbcMyZJikY3\nY3xmoFyhDyh1zitGmtvG0K5PDHoA/53nax00EuvCIqkvdbdd4kBXoBFdeg0m\nR5/gVxRSyNk7nt283uWTMfpkJkiB5ZXkovrAe/AcfE8Sqga7heMh1W2c2ZSa\n6Y5vrO0HSW2Ojs388jNpys/Uvw3LkvV+6qtypP4PNSlylAVwRzxnf6sQIBAV\nAyEQ\r\n=lG6G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBGeD0oCFOqhpUheD9uYcfEde76i43Wmlifds14uP5awIhAMWf2rjyvF9KQyuNmAevhWCv5rJzAMdGrOQU0twh7Rlt"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.badda2f0.0_1620693246747_0.19507552059303057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.004aca62.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.004aca62.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.004aca62.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"3c20c30c670567ff3483811cc2d47a795de96151","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-u6IXD6ZutcUEhQjnm5OfdoldgUXUaMDbUZkOz9pi6tV8KO0CGZ92G8VLq6+xSX0gAdslDMneUo7Cbg/awvSWDA==","shasum":"f9b1184dd84d66e3fe1a967d3a310c4dbab6f52d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.004aca62.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmsd5CRA9TVsSAnZWagAAOD8P/j623SMgNLFD/gnB9tCH\norv++T+Kum9YZ6LbdgjCKZI2bsu6NzF3YSlbBErh8oXJ9Vx3nH29S9WTFBW8\n6S3+QaiufuMEpo9Q98uOgoktB79MaYNQquuB7TZR2LXnAgdyRWdrBLcCQ+ZM\nEoRj4EEUlPopnqbBIoNkiO7G9FVGb4pH04nodjtHlNosOHEzDPWiuVukdPC8\nDH1/pXGZwyfNyCbKXP9SGhMfFaxOmAFzvyaRVwgdla+2anqqY1ZO5ij5gCHx\n+CmeBJy3J6XclsGcC/+zaSk+2yGRMSy0LjaqJLrKg4cEXiQhJBXrmYDtECXm\nqiHr5JeV1/oGePHmxSpjUmf8rsMdKXm9LPfV6JpC2qWGncfMbTTL1JtSuBs1\nDJlitMMMLfd2RP3gIp74DG6ekWa4i87wfeRVoZewSa0tsosMFsj/Wefk5Lkf\n3JW/A6Is77QNaNL0Y5X73Hh+6vjPkDUPWHhHkSMAdnD3ITns/Sz2jut/Gqpt\njy1ufMTLIFRQNQXb5JRciR9CSYaWJSX2aV7Q2wzRUXR8FHhFnin1fVZd9OdB\nYZLHmFkOfPqa9NcVjSTO08oYlkfVESSBCMx4YBDsZY5JORqKdumvOtpCwC3k\njEFy04qCLNggj2eM1DA0Axf/HY0JkvEiOtztCg7LsktRQIYC8nTm+1n9OAvo\nnb2U\r\n=NfXD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC19lzXB4W4W0xIbYjwLb8lcyLeTy2iOZpmifY/LNAITwIgPMh179Y8Eyssl8/8ajTbU2+7n6ial8xTiYWqLV0OxTE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.004aca62.0_1620756345108_0.4835600028010958"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4af17446.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.4af17446.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.4af17446.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GTrVDBwAxGrwaJv6263+fCdLt3Go556S1WZUUu8U4jnx/RTVwBQ+ytS4p3Aojl+ifWbH5vSBghl6/hGATUC9Pw==","shasum":"8e20636f226b08ed2d933ce16038b018208b70c9","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.4af17446.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtDOCRA9TVsSAnZWagAAYt0QAI79N2qs71rlE4u1H2gl\nz4NTlcpXYf31J0I8zX9DY8e6F9adH67KpPURna+FnbUaPkcSSApu8Tz7o0al\nfB/QrIiq080Q1yHfX/or67RuHG1QnvvjtVbARGa/YaBIOz+eaCgWcEfO8dHR\nCo9bSwF9nZLejo9PLZHwy9DoX6/PZsB1w2dZbq7aHzuVbKumgNDL8Oiu8Ecy\nbD1TJjgZdVN0O8nAZ2PuTCXvhaN1j08yrXuWP1hUEVj9OdXplImQDUo6dZXR\ndO9tkAckbyUHTNbXf54AKBZ/MenxJxBLHOPGYwzbwQxnh1NQpEXz06U9Aw/j\nfj2JYYAOUvfO6WWKbl7c07c8fEAZJWxMH/DDk1KHDfuvpYzB9o+BSdNWg3SZ\ni5iXBKS5GnBcQB5zL7MGN/et76mfFPCWdA31HECAulXLILPgOABt4Fw4VDzy\nycZy9JyAfZ0jQjIG4iko4HkX9d+jSBGkbfuk1w9rGBsItoh1A/EnMn4ZEmJG\nnW++q9JaH/VcwrAPB2dwC10IRAxTXIUcRJ9tqpA2kqa2qSO/HWnePr5eP7FO\n8sQn3SuOXkUMi3paH13zOwsN9xahuu73YXgrnIAdqVZStd0LGs6vRzSuvRnp\nKKv5IV5wdEBPFa3khxrtV3B7fLbIec2zmsYriC/t6uiPpjg35gGdPy710A1r\nqMrj\r\n=KfxH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYHc6Evff/USBu49G6bd9yxS1aR9Vm2VceQHBQB6NvkQIgI3/czy5/8qnEBYpW3GijgBtLyAwfsxkvphpfzo5Hhe8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.4af17446.0_1620758733807_0.277713190659026"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b94d7187.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.b94d7187.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.b94d7187.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"0b32af6d751df8cf58980e7badd64494f9396b00","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UB/NZZLNHmdi+NF8/qbt7pwSASW08X8uoR/ouKdvy95JRZwTsW+H/q2/3EOf/C4qZRdwVvew97hSpntZdVOeXw==","shasum":"c583614c9a1f2951cb0161388cfc6deb3b512b7e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.b94d7187.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtIdCRA9TVsSAnZWagAAjvQQAKKOhRu5HaIK84c6eQPf\ndXaKeAJD1aS6YHickJeST9QeMC/CSH29OQ1ndpvj70bOzLYzAVqFBaXwJa3U\nPx58eFARshb1RX0v+kmPTaq4sBYHjlfgZFs9K28lZQoNRLwjC/nmD97sI8bt\n4G91m3oFmowe3YTspD/B0st9qTh4dmxtvgNxeleZ0n5iP7umXm92yoIIAjXr\n4UGb4QOpUlxB0ye4vouM018mvyoRX+oTsIn85c+h1F5EfjdDS3gZoUke9AAn\nMwzUDVG09Piigvfqvj2oJWt02G4pw0OJeHc+mhGEQTd/COf/ErytqmW0+xI4\ns0f7RdtbW2M/ciQgpuiSUE5RImdXmPkB1QdeeUNwtshwVG9RmWuuvGQqbWoa\nTx+RMU1kIVycoy9A/lgR1IZJ9dqLKToJMPDob4y5hAjIqTg5i6k3Ln9smvKn\nAeH23LMd+2JbbZBAUGJjJI+NkqMN9vyVboyIeg0pq+ritcMkwHaGb/Dmwx+D\nZSzHIAJwmDtk6jV5PYLcrNMbHmJGq5vkMqkAyuTr+Xgc99aiPjppX26yoeiT\nsXR2aOp0BzZ5zVltUef3dhX+dHKPnuYEAp3TTJQbuXEWBJzf94xK6Rj7pnaq\nI6cddLkEeXXKINJHW5L5cLWZaHi7S67nfeAW6riyUYRsikjmcvlumO5NJ9m0\nwQH9\r\n=Vmi8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGOxX8ovxDVcroAxpY9i0CcbYwVGCDQ8LM9SZoCzCEdQIgMcw0S9hXjDeDM8N2PXs8nAy9GT8xB/jKbbyq4myaJTI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.b94d7187.0_1620759069422_0.5046326600288156"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4021b2f9.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.4021b2f9.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.4021b2f9.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"535a4442352f807e1f7e655d0a135c6d12906ed7","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JB1DA1AcNhvrj+bhdW649Dc6Jry4j2Qq7hAGuOU/gj1UKCPzB/3FQ9OEHlUbZ0pmseCbgiCol/T9+GhEoibBaA==","shasum":"fd643e4b2c0399626e3f88d43782c20a4f41d484","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.4021b2f9.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnE/hCRA9TVsSAnZWagAAPYcP/3Z1yj5P2Vzrptnyiyuf\nI/WCNzalA3NPNifm/Uoy30QdY4K+YLwNt2fPFR66dKNTU2+MQp/Oi/oiAp+7\nRZcrA89NtahJA+oUzlVqG2084N4x6PK/jJV2CJuGv+aTzM13DTS01jivQMgq\nBQ/TxUUN7y5qwBO+hbfCeQl3dr+W4PZJBRSNfVN/33mhijCeqRuF2SrFiA47\nvgtTK9VEWGWpAU9NHsstS4PGT2EykePcOngFbDErQGv6ZXmy0xIFTdyU/J7K\nwZz92wL0aY4OiGywJmMJbq8GFDdeRr2nqOhqcSUXWXbznFTznu0HD5/QknkX\ndIjNEyyB4UHoGTDXotmndGPI5wO6AKl7qK072WYaDNoz64mk78YzeRr6luoM\nO8sIasBpMBsdw8hSLt4kWxUjPB00Hs0F9RhImq+CsVL2YUm/ohKQ6Wd6tnkb\n1VcVyXya9rVa1uOr9CXjj/qmvctO0ikdGX1vNbFn1dChdknV9GwSTTNWnK0Q\noaBCdGuUayRr2BNTTaq8WrjxVQBBkIT7ocMKZeYKS8mSt/GKU6DjHY2v30/T\n9yKsCFdAqEleRWrb+U6eeH40DPWfmGOmIVTsk9NhAGRW1yogfkiMhGJGxSyj\nE5jvSOzcSyVovRyQmZ9Q/dauILs9/XJUZ44FH+F//dGLhSnQihTvHIyK0/ca\n/72I\r\n=M6gJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiZ0FCK8B/MBR/J9QRT0qgugofnlXAeAS39Yc19Iko7QIhALewqs4k+EbKGkLa751tThTPBn34JsYRrA8TChCCroZv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.4021b2f9.0_1620856801126_0.2893994313025978"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6a5956a3.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.6a5956a3.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.6a5956a3.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"1164d783391049aa2ff9412e519af87df40b5406","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ghzFIOTYT+zbVWrR2QB2jyTAu8E/xvEIuxy+Y8ekumZ/U/SWPzNXPg8IHubN3XodSv7RhR0JoCHnngPTICjwCg==","shasum":"b5b91ff59c5d859f9a516cd605735a58d3db0bf9","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.6a5956a3.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFPZCRA9TVsSAnZWagAAgTwP/2olLMIP24MGUefnRmd3\nm5CYQzLOkwd+q0mXTcCRB3LS2vmFinOva5M2RRYZTxO1lLKBKKBOhXVpiZx9\nOnFsh1YZlLTizRFTWnH1WNaInO9uzzMkyz6xIVN7URgXnBs0WEGFgnE5r2V3\nqwe/A4PFBJQcQwyPdNaD5UE9PJ+xuNEd7+9FPZZH3lYbS/RkN2AjkMGez79E\na0E1ivjYDvA78JHjOkeYNHaFRcYCmH6Gs9dGRHCsEEvLIat94gymqEE+lSbe\n2KGkzcDNxaLxPUi6X8ryaOk5IsLRS7WxHrJ2iSHeYyiTARGluI9vN4JS3lP7\nAwl+KxnpPDvzGxR4SK3r0Hxu9syEM7Vw+6UtYl+ZJBckFytMvZPEBPljGk7c\nl6+NXCbQ9UDcsd+XXHrSKrimQcKQxUxasy/pzKO3BIwFGY6CK1A9+VSjzMgp\nL5H8XHTDcPWqmk3i7lvND9FsGMJnqGVI8ZnZdbiXttJrG2BWCvg7pxlweNIG\nNzu1TfW0CvqwFjualRKHCOCVma9cDGP5ySLAnj2nOwWKEke6pQkY2Dq5A4Uj\n6FgC4AHNKRY5LuBrjqEFX7BVBkk94pYe8y4/Zo64EzQOb5+2xkn1bS5gr4yG\ne+bd1lW+fwK30OmHYznvPgnhF5SfRVyDxTL2CCyriSx7ntK7IA44eLvEJHOB\npfWw\r\n=oJlQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDginNvZGqpT2VyZ3a8IaR5bvosthhIAgBdTpDUXKpoFAIhAIZnQLT3/9i+iZ0v8JCKSdlQx5jW/Hb4rIlVqKl0vjcc"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.6a5956a3.0_1620857816872_0.8815524360535516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b6e8a74b.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.b6e8a74b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.b6e8a74b.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"09c41b7e9637c49faa75e5ac84cc73c8bb5f80df","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-H21jb3WAZcqbnQUBT2MA9tlb4oKSI2L5JMNXCyqG6sAWUYIvbvMRa3uX7ZKpEbvM3je3Ac1P3/5bKaPu4jwIJw==","shasum":"a7d7269d1c441d104460b77059f7f6587b4b42c4","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.b6e8a74b.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF6fCRA9TVsSAnZWagAALJcP/il1Q1sn7tnMxKlwDspN\n8bBfTnM59SsjNeFY3nM7SsNEerxo6E1CigkMBHFjryTvmgo+FWZWt8giAcGX\nHJ3zgo6H4gJiWiS8cwvKGiTC71Kx9xyHy/zS9B9kmmmp13Eg/3VFeiDCDSdb\nmyFR3hkLZX3LyslMvPkQ6c9zkr7uovA96LvyzTuYVADTdJJpxR1+3p6/myct\nAySqqDHMwjhA64ipqdvq+RIRkIDQX1UyEAqn14rjG6BagScI+iQaZUBRLc/n\nlJ+rmvDZ6eYu6P4THBUmfxleX8WF86EfjUkVea+iqRX20RxAeQ67+DeSAktU\nzfCwV/kLyCxQkxpTdmmdKZc27LgzaTzgYvAcEkjrQCdx9RPba5J8Z+6Dc6Ec\n6MheTkRbpQx/KvNK/efDKNkDeCE8/DcOYk8BByT+RbXLSnFeXyqQq+W8Vc82\nk6yOynuiBUQZ2xDR/gwLHI0Ws1DXQzdFKDzN8brn/noraOWPz32M6EC11n9f\nKxD00Mqe9R9np9OaCI/vNNJG2c8Bdf7ZFfI/cakkQNNt4KWU17TnzO28Gumh\nAulKL0wL0/YG2QH8YPIAcgs7RlEpEUpCdaN+DYOEIRcxh2ekgWwKLI9UaUIn\nt5PDn5FdHTx0g3GIJMo7arm7RzhJEHQ/DZ9jqXgs6ZcAET0QUSwgjMlJJh6m\nNUL/\r\n=TRrn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeRCp+ETCKmxrVd3dw3IXHpAkTsJYp8R+qmuva8VOKFwIgP/QUjvqs+Z7o5tLDmfkSZx8OHxQmW3ALSqG7piEbyJ0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.b6e8a74b.0_1620860574823_0.5316041260580191"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c94e1030.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.c94e1030.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.c94e1030.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"01e4fa09129b5963d59405355762cbd1962f1198","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oaYi9xLnqJgAo22vYO99rz9VH4ocfrZm+cK0pEivoCrrW2JiuEoOwt3BhdgCah2uNvilayk9105JJgHoqwJllQ==","shasum":"091b27cde2eb2e493571a2b1cfc468f6f7abd72c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.c94e1030.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF/+CRA9TVsSAnZWagAAN9kP/1wH0d41HpbMHh6At1uB\nlIkHFGFfDbKk7ErcMXvuqxbMfN7U1ERjisyacWLgou3f/CODAYXNBCJssL5r\nhLD6CEyFiEaEir6QqbQ6tTtCutngncIlN15zU2dAWaue28ewQuQ63WcDjabG\nP5R3DWd7Jfb1QrgMTIDpvH9EwWgrT0iX1ZWq10Xvp4225N0p+CfObWS7obUe\noOeARCMjpUdeR6UM8f5d4TYRGhznqFvVI56o2SQxwdTjYO3d2MU268+SFP5J\nFV1maoQrj6w3BOI3ynUgZC6v37ySMbt+VQqpMBff1TqV8yLePAQ57cGisCWT\nVtMxwu85Z0H4sJPQ5ypiB9iBGZM9yuIRSTUVjtiSx7OkgqttNWEsjpffnkOa\nXdhzUeC2UanCEgTcFLvUdBxfINgHulM5Hxg/vRV7dIvHn4zP3lpjhQegmR0G\nSmnx/8TNCsQE7kfkqUj4f25AOIJbazU3qO+Ku6mTEpId+K46RuIXKnhiPKvS\nnOGAwYchQvztZ1/fIto+81+nHVBFW6dTeIYVKHS5PJPQF6zeFQ936f7EQCRQ\nfV2mYVMerIZYisldz2isPef7Hic8K7JBHRzQ3G8fzubkMfGEbb5Kv3oJDqd7\nx1pTZX7AhIuCWWWwTpW+NesUOuUR8qWL0mNyNDzH2Bv9EmbVqCyFR9y5s3XD\n307S\r\n=GIY3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHVrIAq0rcbyaH4dKcrX676uUpAF8XyHW/iMA1OkIR1JAiAo6WBJ7jh94+l3G3Hulw5k4HZ2cNPninsig0DUInzmUQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.c94e1030.0_1620860926415_0.007770501165790922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.40a34e35.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.40a34e35.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.40a34e35.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"6cf3913b43a92723ad4d1144b964df3a8667ed7e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lzDFAE1PDEHx5/r1gXXP7pYru4tiPj6GVKRe4+/TdDJTTKpJhA+rX4e+9tJBpEaFLnOWav6pIvMBLfsWWjTcxQ==","shasum":"ea05242e6c09b70bed8d581ee63c1fe97266eae9","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.40a34e35.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGuBCRA9TVsSAnZWagAAyXMQAKSgwViTDwhlcP9uJqxs\nZ8wrEVesByxGE8/FGATlEmA5r+ihL+ba8MlfXhNXz05HM1jgIDHk5GGWvPAS\nsEKG39RC0DtvGT6tPR1lt4lZO/rUoFVwf5MkzWU2iX9McrlVgT8abpXGkcf8\n/etbYMSf8rKsjhwhE5MbDTGEID2J1pVNJ78C6MBiPJ93W+Kk3EyNU8b3UG75\n6uUfPszAgKZPnDBjEpxhidN4CabiOP9U8G3W4Aacg0zp7BWSm7Sg/KArIzAa\nQkXjWhJfIGf23sxP8RXKFvrFMFicRnLY1v+tpOf/8pomcSYI/oUTp9hSFJMy\nEmzjsaRaPtxL2He5xh1HXHQNcAqIQXIHiI0HzLZjjz+hmIZLFmW0gk8CZvc5\nwKzBZWsRsdegtF2zWZGI7zJVMLAlWtmm/rnAFhpEZ45osIJfHt7EPu3WxJzE\nTAP4ZZvZDZ/0ytLl+auzTTPBEP6L8n4EAdbvY+UOdHULeYuPanPRbiXiZTYJ\nFFMa7Ia/Ins/PAYnVAT+lhskGK7zEm2M24KAKzRT2H9A8v24n9orBLyp4hOh\n6iHhV1Mk3wcTGdAvJjIXzR71LcwzDP3geE6Fho2f8xY6vnGIm1c2+aYMxhJs\nsWu+MOYYsuwF8TMpkk0PbFUD0uUki2BzfJ8WahwcXKBxEXS+T59X3XOkNjjg\n1K4a\r\n=+QBE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5555EXxPvwOF0Z77PdY3qcdE4MgaPJCb+/4jW/Y5c7QIgKzKcZ4fxd2cTYjdnvujg+no+9M1JAOUn8HDRsQF6004="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.40a34e35.0_1620863873111_0.7986715398134729"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1be14d2c.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.1be14d2c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.1be14d2c.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"2fcf49467ff2fdbb2ab4a987563f556e6ff316d6","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pLeP4ti7x8Zrru48vN+69SrVSEGZu+TyeDPIrMA99wTzm04BgGo/W0wDjYSt5u7taAVEF5fluosZtXmai/mPIg==","shasum":"fb1b08b515703f493779f58674d728c7088fbc22","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.1be14d2c.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWalCRA9TVsSAnZWagAAAxsQAIUT6iQ33rC37266oS7+\no+xdEN7ejkax84K+fNemJnQQ/NFtX5DpL7qGXFqEskc8byC/NIceHtmBd+eX\n7aMZoYgBuZTJlSxrDH+clW6AaKfAqOg8ycNVAe+RKuky0NCTUoJ50AmVbhCY\n5Fj22CRhoD396eqakAGRkURzc2c0J1f4XzIpuePW6iA/N7XRfndfxz3WTBws\nGMoqHlGDyPu8ISQ1kuIoYT/ivhvrijng+sCvjrIPbj3bqykbr81VmRi2Urd2\naxf0NVUC6SBa4QBKp6eXlI7Nn0Q4rWveQ3xtui4DR+KKtIiQce1X21dEYry0\n9Wb3MRi+nUoJUNKC8LXg2VxuRgMFCitNSPU536mI+SN2/Z5yhiC9z7YuGTxc\nLzF/qDAlaM9JmobqjpUmiKRHWmEPjGb5TWPYMMZiySnoFvbV7II9yY48g4aQ\nnjz4c/prSjYSRVlQgaLBffVrW/LE0EE7U74ouO0nb5iul9my39DSKTgmc4oB\ndqYV4MXIK6rs5kVEdThm8+hnzWz24mKeTzBgkXL4yyMb9ATajFsyorItMBZy\nBMn/Uy+1LgPhN/p2mrqSivqQFppyByldlSbaJEw97tONKLy4HuQBX6iN5mwq\n12iRtUM+1z7uKRgnsflCNPjNhfP5toeXgcn5soR3co1tfR/8rTsKxcYRG7kE\nUyRC\r\n=aRFv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUsmRbsujK3xWVaAO653F9d7MH4tJaQ3pK2Dh2VMLlSgIhAI1oX4NdGC/19kkapHtb/e+fZi/bgSDkvGRAf6csF/qA"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.1be14d2c.0_1620928164992_0.31535141511473497"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.87dbd64f.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.87dbd64f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.87dbd64f.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"devDependencies":{"@material/theme":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"5b6b91a042dd241b949278a5e56cf671221e6a5a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WXYqaxGqiBxxBU4MHlsVjO3tbxDE7CnYCt9BQT31i8hXLul7DvY6mTvXIa4pAMHge6xH4UDB/Y4+2glwIMg/wQ==","shasum":"44df5569ea6758de1b4c0d7502b411928a61dc0f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.87dbd64f.0.tgz","fileCount":13,"unpackedSize":57737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuRYCRA9TVsSAnZWagAAn5sP/RlEGAaS/gLh9ZRwrBr2\nV7l2N7TYq8MMQc41l4aaTaipXuyF/ZQNZQk6IMCxmnOoXSUw/ZOtiZnp70ZJ\nIkyl7FIfleMuvUOPyIoE6Le7pCORavHVsaxGbyp/dt8Kl3OVgj4HhkWLvR8T\nBmlJUoCrFf9/8K6PoRBFnRdLlTlFVl0EuwN/chcU3PAe1HHpK72r1vI2fdJT\nBJjUTAUomq+1Aro2cfuizXhPA6oc798+Yqw7Z9TxDcwdi6Xei4U/SCQcFFk1\n7LLc1bSOXjBhCu+nm0TsPr2gP1E6Co4CXBMOsH5ew5lBAd0VeJoCAMWkxwHz\nmKp5vb/VnbKGoYf8t+aDHSY2DqAmPhwbcIIcs5Kw5xC/piBCKkY4Y/TKeBA6\nX0wpVAKaPCdl6imoFJvgUyafpQahdMf3dtV+HfSiWyXOq3KdNq0wddNlL8MN\nk00PZeMf7c09Cwh9tSMFQuJo+X+nN676d2rLeJn2bkBnSPPoXR0ko1iqtrbp\nKwH2tAdySqTlRMMcWALqsTQV0rw8s6YLIZW/JaFDi1bgT9fZ4plk3htrH5se\nOPtRce9AkbFwYIDrgUnPc/UKXEJ1Ttb3B3tM5nMx0CsGqO3qIY4LY4XawqMl\nzKsr2m+D2ygLielf7ZxRw3ndMN4zjbj7t+6ONebeMoT9XDITQtZeu4NLcc8m\nBoHn\r\n=Ql/i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaw8ztUL5OlFZyO5PDpuvOgcGb9s2xORctXJ8hQcgJwQIgQRaRcX/RbYZdrQSN1zCkSZfhBUjeb/vhRo76H5sYJa8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.87dbd64f.0_1621025879958_0.42834362992060515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c452e4da.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.c452e4da.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.c452e4da.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ycDiwxnqk7lGOUfCSHlJHL0Nd4rZ3ozOfr2Cwln1jGb+mzdanihHB2vWhUxYbfehyiLw9JFh08KfU9ttn6m8zw==","shasum":"512281a55822f3dffc2a99cc33f21945c8199d8a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.c452e4da.0.tgz","fileCount":16,"unpackedSize":75136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgovzWCRA9TVsSAnZWagAABJIP/j6F1Lxqszt52pjs9lY0\nt+f5t/4H4Vd7pmwVN8Fcm5nycf4pFFdneBz/0AFVKu/syWnTlSnclfi62SUF\nL5NadpXnCF7sG9P1Prx+uTFyRAnJyp4BNMnxpJClkkQnWFBKIhXOPRE3nkNA\nvAUdbY4/AsP3y6SOoiIqEVwY1FEVjyF/Iq0qvDOO2MSI5R9Txo17+ElmQACI\nKRjIKrzG3D/oAlnxIg05FZyDthXb6UVRrlwWaIr4AnH+ucTC3gkX/r+Pv7et\ntOroyhckwfHFYPf0mp1cWrZEFqTMZtiAS/5YAnJ+kAbfq/vM8TIkfCoROU74\nWnE/3JjQbpAJY0i9Kr2ERHQN2iZoNMiYZzBAw+SReDk6G24VC0ki+hLzHmll\nGHsrIaehoIFdOiF5Pak5vlGPh+4A3q871SImK2bBwOvGemSzNo1pYlki84Ia\no8ym2jrx1zmOAe7BnjfV9z5YZAQzmK2oYaXzs7h52vU5qZaITlZXv5V61oMv\ngQmzE31OVJNgP9NdcbwwK49FvgCrx87ymx4FKVG5babihdaymOwmIlr43yoC\nLF+pcr0EyAZqF/KI9sB2ZP+uXrGbH6DDPRMwSR6bAuvJQZIJEh4awdwWiOYf\n8oKzRpa5U5e6wE42n711op+Xr9VzzWSYbpx30DW5Bj58+oZWPuuvFAGXApw0\nhryK\r\n=vD95\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICb7LlX5tLww60LQ+47WYdk+wl88skPoyIYX/SNseMRJAiANd0NwtGrxoUNHB9YEgdN9tCIMLPvY104zEAHMlvj62w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.c452e4da.0_1621294294041_0.5584489397928192"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2212691a.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.2212691a.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.2212691a.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yKpiFCIcec2NztkqOsTPA8K6gsAxtB5VJW6wo+yOfmSwVbPyXdK4ckWqtCV7O6kSQYRIPFqZDvSIGJIFiTzBvA==","shasum":"7abbf3095417ac4f3c305634fb27a34e35990dbd","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.2212691a.0.tgz","fileCount":16,"unpackedSize":72078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowGsCRA9TVsSAnZWagAAeN0P/jA40/GK270Y8LWicXy9\nwjV/n3i0IMn7zMApMBinyi5xi+3Y1CbLuVV9TR8fu65MuWiBVVbHRXawj8wL\n/x+xPG+dVQuYgnyJUIslzrxyhloYX/wTUNYIFV1p1lMSOh1edNewiQVabih9\nDT+01njMlV+aiYzMTZNUxxDFwrHmOlc2dAxLcvabMK3q4WiIaGqIFIQNVyvQ\nZwXCq+WZrPn0bws8jfLaklu1RkjFmb0+Q+c5P4EWg1drGcoKyKoeDwsdpqU9\nqSQbI3UIPFjYRUP7usGycrAK2kyhQNBYxhJAYrZY9oHZDsHX0sGuMBWzKZb/\nbizvZj4HXUUm+YfnbU6dgKLSIC9ifeQB5BSnNuhgflEu6OphSfvxlE8/Eaam\nhWAFffRlS7jNpziSmkxlZN6+mGsIyG71absPv5zl7VoJn9zxydyneZyYdCrg\nbeJTmzfTRGvdmfqdb2lHujZSEcgsmebqhbOPzpu8Exm2zAjfYtRe0KWmnkVL\nOPVy7NoOIb02LwCjbvlXn5i9DzF/vg1AbM1bGfEbohCIbbcHdM7q7vUURKnV\nTswlSmF4xbWXh0rQnZS84mIFLrZK8nSsvtAc2ubwr97g9PE+LvVYFThBtHDS\nSBXfatVqkDIFCLAKqrnCLGOhQ6dYSj7qPj1Oy10BYTWjE05TsOfz/eFQy2rP\nRWma\r\n=fT6N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBfeDkYhVIPl2pHXsQl4IC22AhsyLfg1p0dUmtEo87+oAiAfl7+47bF+SJkOhb3he6rVOFrnk2xzJGtf4plVbfHpQw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.2212691a.0_1621295531576_0.8154196627433172"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.f748ff2f.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.f748ff2f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.f748ff2f.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EgtjyI/kIah/Xhl+sFUAbiaAaQnCxbwpWWNus+jxJjtMObZvausCRXtrZMQiZssjWvdZXk++unf3fjbFr/ff4w==","shasum":"6a71506b3077ff80bf42209f054279bc3368417f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.f748ff2f.0.tgz","fileCount":16,"unpackedSize":72082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowikCRA9TVsSAnZWagAAOMwP/R/2ltdlSJjLUuCJ7LhP\n7p40A8RXt5OxaPKxV3gHvCUndrDiT91j1FKyoeuQpvvoh710emiCls3EBOPh\nxno4J2krxMEvZ5ZbNyHwFfT0u/fZGdXo6IPA1b3XKeXhqr4cgRB0C6bsc5Dc\nK8qitojLqJdeKYcE33czEVixZn6nUuQ7cldcO7BIPiv9mH95r943AuWjrb3S\nDfcucOR5VoIRp+u4ZUGJlbWfDq+KCc9whcx30BUz8W8wCH+ymv72aOObRTA8\n90ev1HXxpxYC/ROhvPc4aGbzLyMagrT+YN5osBTFIcOJ2pnA6eVED4IH7tKT\njfEQsmzb/rxzZ0roy8SxdgZmJjKiqXKamuLWeKjrj5mXB/f2edj0Jt4Som7v\n4XJBmT5y5g+3Vk7uLTdQF4NQvbsG47SnzSsYWotUOdxZkeLpO7tbj2V0Da/h\nJMUXeDKJE8ian838C/6+YwLZwQ/oqtUujHqZA1pOwyCEo9A6iHzxoxPG6prj\n8nPqzLum2YD4w8hgIfWItk3iqQtbJh/RAR8QGAoIM6ifRz6mKN6tlhrpIBDs\nEVqRD/XC+jUfgIc8uKm+4kNkFxhvXSV+sDf8Ap916TCKGC/ynKr1T7ZJ6Mc1\nW21pPUCWh4KLT2149aHcQPfvY19SGQ0BJc7EAOSf3d/5cfNhquF+/Qs2p3OT\nzR0a\r\n=fXYx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZtQNvCO0BBfoFoIWG+P05B/e85dFhcOGOpdDvKGtwgwIgRikoV4jQKPbtxIu0QWmH+tcvsaMs6ISnXL16M5namgQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.f748ff2f.0_1621297315966_0.4424502553080558"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cc04657a.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.cc04657a.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.cc04657a.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ULteyTxB9givPewY3zV3+vjnnbCJkpK9T7wskV3SSG2FTcc/BBRtk67BZROiPwMZN7xABEo+5vRhkHE0NwAzlg==","shasum":"6be5892a774c2cf1b307d2afaa799f8ffff18712","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.cc04657a.0.tgz","fileCount":13,"unpackedSize":53757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxZeCRA9TVsSAnZWagAAFVMP/2Dgf+41j82bpdMzVHYe\nRsgXaSCQAzyQIQlfn7vsGbsap3z7ZF3VoJ0mmd37EWdPWhFuVB87Qpvn7T5/\nNN9IXsG30aPyqB0tkkYMoInHtwRh2+i2JCCF9ojw1YU76Bs6nwm5TW3QG8oL\nJA49NI/o0dS2/N3UNjuLKlShyOGCi53T9l+Athpp+jMNfkJLGAWRyrxTJiWG\ndLeTB4prx55TVa9etCIB/FIz3uz7EY1pozIVEWT8TE8t+EZxu6hwM8mDGbf2\nSR8Qz4uAdo8xSixkltCjkADxEamEr4jJS7kiZN5Yk4D/TUA2Tc6wyiRjkOZR\nQdp9fowZ/jN/8ISDxOFBcJkj2Uf9Is4tFdPqOArW9lBmEjgCd+ypY4aWSPrO\nMH7NK8JqZa/lYyxgpwOcq4vMKRUiyL8t4k3TBTriI5vlWzkbBpCQesYQlNE8\nQDGfiwzEbXWDy/WrFaJp/BLJPfZCrwUFF1pd02VyXaam6IUOFaVw160uZPTe\nGEtta3T1uw0kefhHc5RFRRopT9CptOuz77T85+01MtUnLQn2AjUqc3Z9PC3B\nfZi57SvrWxRqIRFCbhI+YMi/FpJLvlmuEViGyE5NoqRXfLnj4fjGIK9j1k19\npI7s7yru5nmGHLnatvCmMH5r2L+Rhe+rhERC/rkXgqPfKRrsvy64XcFRgiaz\ntUiL\r\n=mKx6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHsd4jonAImylZSqS6+5lrMdCDWMRjkhBhC0a1ZnZvu3AiEAlucQYiA6MTEDDUkC4q5tEize0erlKcC1bgy684sfLHM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.cc04657a.0_1621300830428_0.958269986727144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.3a3114fa.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.3a3114fa.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.3a3114fa.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-b/obsqIaxQ7H+QBX2jMFKXSqxJHjIhjERZ1GgT0NafJ3t/ySyPBdhLRw2tftYI7ENG1Brj5Hj0VksOl6Fx7G+Q==","shasum":"c8acf7d5d16e4af5835f503cd589ec839d7ef24a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.3a3114fa.0.tgz","fileCount":13,"unpackedSize":53757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaHACRA9TVsSAnZWagAAZ0oP/iOn+QMb95SyBwi2KUc/\nzzsTGfVKswWhqeq0M9I6P/47bPczhJs4KYvQoKtzyrFlW+yd6HmdOxwGBz8n\nB491idUv61mvf6vulo0nTLw4qFcUTEvzswzXXimqkIzawTaTMs9KVGLfELQS\n5uMR+HlpB99/DECB5gBmV1I7a+MGzxhyCekCFyH7gMocNHEiSmW+Ua7sBNH6\nsznKh9PwmVxPJu2FTXFZb2A/gavvY7xiP+Bad5mdNw3p4U5vckky6V+EK1xn\nbA/nriP+RuwlbMqbEea0+h61vCvstqchBZJ9Uwgf1wUeoeH20YoNQ2q3TpCF\nQGNpkBDhjcMs26dLJOtyxalK2PUg6RR8EN8JeimDGs9/b7QK5E84BcQ76ubB\n38WanxbtLpVqKwMvdxyDpjhM2MuxV70EhJ8p7IjzksGxWJerKEmZHhRDXCH/\nZj9wlHIVkmlT8mtv7Gos/yyS7vBGFEXF2vODEglzCL1emYSl9dvzxBivLQ38\nf+LSRMnQWwmkgyO0NhG3HfmS4TyH5MbRxqXKIY9Bqn5XG9v0fNR54k1N+Iqt\nEvKV4yJrIPoLPw0l0z2hIDqf0oCPOhtIaSaZ7Y81eHZdqkIELJw/YrZI4y+n\nN6AuALGJjAmKbamLCjeXKfxfhyZ6m3oPpBageQgbnUgNFFwKQq79FgKzFygk\n1ge3\r\n=i+QC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICim+9Mb4vRKc1E49njJFG4fKyuETCngxH8EYar87AALAiEAz4u/BHHmKq6OfxOWDPSNZhGQiu3Y37NdxWvsQQcXJqw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.3a3114fa.0_1621467583502_0.8203408947291673"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b46bdf83.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.b46bdf83.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b46bdf83.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0PqIvYqnX4lTfoVyDm+ZCfPjKPLUr7JdOcRo7DwLSvAYt6r205GKt4EQEPlLNqaLXvvI7vIAhW30JW0Xe01ARg==","shasum":"deeebadfc57c76ee68542335b213fad1bd9eb993","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.b46bdf83.0.tgz","fileCount":13,"unpackedSize":53757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcBlCRA9TVsSAnZWagAAjIAP/jBltlEQ214jynOYOI8G\n3F4DpMcDz2bIHyYqqJa3b4hs3X9860GLnTKQacAKxeH/CwP4KahEnj/Oiu5N\n/mG1o7TRrJ5P+sdgz63gqgQCOk0cfX+4VsDxoW6sV5luFuDICF5yLTIUXt/T\n3kQhe4UWcnfhx8zqpOI430xZgkvfJEfQbNaegZuXY2+wnrqJiRZ8V/9RSmN0\nJqL1Wn6MCQQydQAm5Lax+9padFM+bUj2EDG0Q4QPCiyfn27Pd9TLcdR6hA4Z\nlk36CnX4dl4U65iVCuEwVAJaqXaDl3ZbZnX489DC+/L6m3gohdx75I4/AWKL\nUjr4IUTduIAzkS3CW8TjHYu/lzQ7g/ak5pmWbfUsOxsBEePFs3WNL6mMSFh3\nM1pSaPwnxZSioGe7X11Elj4dHb+tUTD3PW3f7obCywiq2GM8hPZg6AktbqTl\nZSJYZ+QdlEPw7Ea4GjregVqd9ApWaW8HJR4HUKddanJs3dJpuOrg1AfqXOvB\nKgZAL3MAW6lRH17E1Jo9Rm76NU3F1qJ1gXO2olu8ivRgxz/aO0QdoRMYvvPy\nG2N41RJik37PvfnZHMoZe7RODVlbF6UvA7JcyU/ZDidUwIH2bfSe7BGiMt5i\nXd9a75iLCaRpEJ+xN3wu8k0ZQqmQCAIif5ZaTpI5hxD7EuCAWaioW/pBbLel\ns6Cp\r\n=TICP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAOgCjfGcw4E4NIJrdLmgTKcX03viyFAPJUUa5363o3QAiAOTiC4WhzsxZlrbdJnt96jlYCkDSZgYWAYOcPz75xQPw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.b46bdf83.0_1621475429486_0.7195783679541525"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b401a081.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.b401a081.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b401a081.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"3f253eb320a1f9b9e236e2c6c0503900e63e2c6b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.b401a081.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KWjlMSURp2tEfTDerItYDrActdBLV1LmCFbRZ5A+knj7zrN9WuwCWUfOFnYvA8TG8LfSdTHkstHoKTjuB9W+GQ==","shasum":"f6814aa67fca0a40005bc916681462a077cc197d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.b401a081.0.tgz","fileCount":13,"unpackedSize":53757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqEC1CRA9TVsSAnZWagAAqhgQAJWkBF19Vs1bLWmvl80X\nbn38KFRq8Vj0doQa+3jTHVu6/5ZtZQgJLDTGjRcsKjD91pngQDWvrHAisQpS\nU9wHX4B3bkJDG6lPWSTHrqAlrj1xp4nI4TX9oo+14+6eHGVlRZxNDsY7hmG1\njyZe/E/WlutzNNZoSQSDur0Y+HDp7aZAhjQIi9QkRQ1Ul3F0FZc/CF/DJWgb\nvJTYNxJQu841xrttiq9+KMz7OYuf97zs8geLzr6jY4xSGhKxSpPKYm+z8biv\nbnTabNmXfyhPoRZ/Xvh+Rl3yBnuVUXVvX6fxn8r0XKOQLET539AsP2561rwZ\n80nCFtmkLU1A77bChbaxYsw/7MEkZzZtTBH42Oj6bT69Z6swWafdyq881Z7+\nqN3n9LAwljmYfOywaX9vnccXGlt7g22fNH6EyGCPFdZjBU4Zv2Q7YpPUwSYi\nqYglDNKgbU2fYkxOQ5YgvW2pHHeVzt0dgdXsS1BkAMI0d5rDshUnQYzLpTpJ\nMe/HsKJAisClfheEDN7mrzBH1hy6xvzQSwMjWNnXL4pTFoyFNb9aEIkQdCYx\nBSmk2rYi4rTd0/VARkqd070I0P1yzBf357SnEYkKkwSXFQIdrQpzNv5V/VqK\ntDR5ODaH92v9FTYDKYgdNxhPod9baP0BxnvYMv3rYaWepwgZhmMnVlNhsskV\n0ZCv\r\n=yQVO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4z1QntZImMU1596ryNS4NHZD+Il/NIIsnBVj3gvvm2QIhALEDtbkjuBbv+E6nwlZOUy//ixfjH4tcK9/F5fqs9m1N"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.b401a081.0_1621639348867_0.5056783740956299"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.012c8dc0.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.012c8dc0.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.012c8dc0.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rLI/L8un9EDiTrEWBB56EdgvNxFK+G3Xc9y1iKBLxVCXUJ7I248AwIH0UZ80vuRh9+D717Bkp3GYYZr7S/3V9w==","shasum":"bc19253b8c47a82b430ebc1879d18f6cceab7871","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.012c8dc0.0.tgz","fileCount":13,"unpackedSize":53757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE0/CRA9TVsSAnZWagAAi3YP/ArB9tsoGO0mwGnNa24F\nWJRoHplY9dy9aw33BlI9hPc2+T6CGMVgvdSO9pabMV/JtBOJr7DFWu46efsQ\nuISqrtlC5ZhRI8hru7VOEEW8Q8fu7th1PrP8wyvMNt0RskYAMbU0TKpa0660\na5+uTq7QemDqaOmsxEFxBDMXvXH3d8mni9J3d7v0eSjv/GVQrazFl71cebko\nskC9UDujpgo1TX6LcDqbEXwX5aeNWY5pFmYI2aqbTuPygPfkMFRNYqClK9+W\nUoJ4IGZ5K5EzANpp8qJmaSpMN7Tx2UoBlLqK5eJ97jGjkHYs0EMdOj3vUhRe\nS3BzXF1LCCn9LRrKIJlXTyLlW+7slpRdTn2UeT2V4VsNfeLWjtt4YOLjkzn1\ncLcFktvNY7x5w2cf7M6nXbazIqKJmRsu65/aAh+2eTNd8A95duPecucoGDKV\n3nwyX7NdmWTaLLkEqYHKbOlZ+kSLN6bqz495bbhnsbM2rtRR2bYSdOuI6eL0\nNoTKNuD5O1dhhFAleXVIvoPY6f0EE8hBYd4IECCDcQXN0D9AfflDUxllqiHv\n0Ko8kdj3w8HiEWx4wyNMx2mE1qNKJhQzJG7nSEHG6DVcK79PVIA8scSoS1Vk\nixa1Uu2ExoaDNg6LWXkMYZldf8BagVJWVDo/fssWUHxPjcA+W0dO96iaKiUE\n/pRL\r\n=vxQA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA1E4I4iMPOAmm3Fg9yBXSdBLlgtoadZlo/wzviBIzmEAiBechbI4DlX3t8Qoc7X3Rx/+w55w3DYFd4lsqcioet1rA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.012c8dc0.0_1621642559394_0.07226148998965565"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e01a1731.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.e01a1731.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.e01a1731.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jWxmba8RkcyTzhlO/xgLa2Okcql0nag9c4XNDqssU5AzzybGmCySiwDGjkCsVRwnCmNKFnnfiMuV+a6FPxH1dg==","shasum":"2f9fe0f489dccf9a486741c38125d4047e07889a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.e01a1731.0.tgz","fileCount":13,"unpackedSize":53757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq84GCRA9TVsSAnZWagAAJTIP/Rru4huQwiNRJMk9T1Ed\n1seqHX+l7eFvNDgnTQ/NF/0C4lhCR4xi+S3ppaprsP53e/eWrcYsyivuaqgU\nrfAn8kGXMymmpRlcSKbS/fiJah182+KkeB8KsTNPizbXuEiwcblVpva2No5j\ndpkzO3EKaTS+G+uXSo73nXkXfiaaDlsNrXQHlRTFXeuyhrR9zwtwCX1XBknV\ntFLKtMC1jI/zd9e4mA3Dn2Wa6Q6PE2azkKN1jslnrYPCz5FvEmEsp6S7bq54\nnb2PsX5+9vrq8jTq4ftaXP31OuEmt89/+kr/MdJTAP7j7Rlpdj5MHR1HNmZW\n75zHikCVdUkyn1kX09ahDbrhX3GbZ6N9Xade+9j28l/l0T1aw5kzWlJGPp3C\nW+ni/ef9KgSWXO/qUupSnjUnmtVHovYwsjfczmVGCNrEGiaTwjGnrmVQLHWF\nGAnmwWaBTinDHsKAR1rInCgI8OqatUHk/5HEuzQAVHKRKwtcmSxvpAaCe/oU\nqbxi4srnjPhqCHaNhKPW/fSQFEw3J3DVFOdh+2werlk7MYPixTB5/A1rNSff\nyMlGTamj8oNvmdVRs7WR7xnU63OBA8bEJ+KgIrkJDNJb1uRThIQXC4kWo8A5\neqfkjZzKXMKbklXh8beBcbJF8gTaLnR5HI6a0gzSIyyYqW9CTDOMsaaEuef6\n0yyN\r\n=rq8W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEjoiTPtcLYUA4GE47VymO42ShLXU31RqH7m87uvJ6wIAiA/HRXhb1un6ie2o4SS6QSCwDJLuLRP41hoWWsJcyidQA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.e01a1731.0_1621872133738_0.039008728644071455"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.59174b9f.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.59174b9f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.59174b9f.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hNCk3XtTJHffnq9bE8sHLM26rXYi08YY08sM1REVfrt8r1k6dMs+9kfGOZisUmi5fd3k+NmoHe3kCxMTR39/JQ==","shasum":"00659cb80fb8426d694e3a9ebbb6d76f4850bd10","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.59174b9f.0.tgz","fileCount":13,"unpackedSize":53757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTuGCRA9TVsSAnZWagAAfZUP/Rpl3GG1oKdST75hU8/1\nr0fLnaTMRY3f8vEP1zfTCnbyJTHYL/HdOcqzFTmD4nFy+ToaijAUEEaZqEVd\nueHqhwjBjsq1LmRrxwF+mvZWGHk8TRav/2IgCbEgHtwpmql7J6BZsz4DJVLo\ncz2Tnirufr4cXt4C9ttbmSuQl1ow+5ThRcUDcGvqsItlMdXPfZo4/JGPCOzq\n88BZpoeKzEpP2cbIC1vdyEHfN07devPlA8pTd4fcgu2swD/+SNyoQpWxy1jp\nWfWiOVuqtsoPOx+Igz9GWFIqOHDlFaglgXNG4+OT6xDzwHfN7yui084uqgEW\noPw1JXKVQyoOu9OVSycfx5sbz73yv0ows8iuRp+pjmI6Qn8MPm71vYVR6Sp3\nfhZwpOX9x+8WBkeK2K+v0WUnP3tOzHDPpEIuNLZYEw6o/sjdBonwXZq1O2dh\nf9ckZ0Ey/+gGO09lAPjTprPdOe+wH14OKC9/rVNp6iEIWutvgNwbntdaYFnO\n8UsQT/0XyGoGSUMIhXqW+eLeBPcCFUT8h6Uyiiwia5h+uydqJXSzyciM0jZ0\ng8Vy4d+kwB5BLqQZrWDjtuaCgFLGJW20aPgnu+88YOaJDFM3A4JvGveTjTzP\nikMKptdh5n06YmjxYjVIlPTB8Usg8Ugq1X0yzrMv11oyxvDnmi04FGuZOERW\nN30P\r\n=Oc0L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjg0JA32BkMlhvVRdyPFCgPGkRaSB9k6mOgd8vKUymyAIhAOfdNIEjLixMbooZ8/Aeqx5Q9JAsmICKqezkQ/My/ToO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.59174b9f.0_1621965701788_0.02553620843643234"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c96cb2e0.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.c96cb2e0.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.c96cb2e0.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rOS34Bv+PDIQ2TqBpBVhFenuM+wCvbBoW9CX2n88x4FMgXfYOd0sC7jHPw27ff68nlda0EgINI+OFDhn5rOo2Q==","shasum":"75df13fce0a7e7e0fa34b873c725b518d06bdcaf","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.c96cb2e0.0.tgz","fileCount":13,"unpackedSize":53757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUv3CRA9TVsSAnZWagAAIgoP/RnIwajkBxK1u0Nzk2Ff\nzu8KZNYMM6KhutCgXC52tirqOC0eQof2VmVTU/E8f0D6E5Wb0fAI3/mnwaSQ\n7sG5Y+3IyLq8qNh8rr3/hQ9QBuByE1S3gIK+fy9rmRtPYqunt/n0wGDISuuk\n6IS+D86a0Is+g0Uuy8HBz1/OLTA4CTRlQVje8Roh4H3CZDAb+DCnb3jPhNtt\nNfgR3dBHywL5xovbPOktH1IQrJI9CBme/jpTlyBHC+lqAhhBpTLSs6YqGVQv\nto2MogmwaFf4bWMGl2inGZ0Nx+Lzfa85OeM17P+J78UgljLydfVV89ZvTJ/L\nHBZBM64hhRtaPs0rfTwLBG6beeXizBdjJHuaSYm8oQ3ZgnNsah+0Syq5RkLw\n9uvaQCKmIXghLkO1MRVosExm3CDdoQoirOl2KOD8azymIIbK/8xIn6/HfH/F\nCXiA26NmZAVc5FmmJfYxcPguQ4jsUYTmxTMgcenYE2r9XghreNOpfKoSSCvJ\n7xzTr3XbIk4eJm9iUFtrQnhaQALOEXv8Uqmn3UgyoNAuij04r6Dbj6GtTGjR\nRAkwm5rZGYadBD5yPAlb1AzOlxvQOIh8/sPdPfAWptx+NDnFsUF1I+3SvFkB\nIwn4lkywf+eQ3PdTJzn2VR90/JsFn03fH6lTZCSp+SvhIQERivgbWulhfxb+\nOZQg\r\n=pnM9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDu5Ri/ld0hpNpwcmdDXkcOiltWfQTHC9VAGbj/isdKwAiA60Ooc1OikUJ85JB0UIYahVSTOqI+g1V00+Zn3bzvZfA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.c96cb2e0.0_1621969910696_0.1482746131387358"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b9b0e330.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.b9b0e330.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b9b0e330.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-a6Iks8KBcguLH0zXNSE6N4YVli6ggM7lsMvMPvIeD+uG/oo6KGNg6oHzcOlHLe4p5VbZYshyzzOM56wD/1qaOg==","shasum":"ce136af72d41ad329d8ee1d9999636c5825e4004","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.b9b0e330.0.tgz","fileCount":13,"unpackedSize":53757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWVLCRA9TVsSAnZWagAA1L0QAJw7q4c4MyKIkMYyYQ92\nKE+SQfPTTrSe/bye6fx63MTTth2L4GIi4YWfjWxV35kiMb6J145Gc4uRw0cM\nx1NwNjHz4wpjEFAjm/riiHMFZHtzXYebGeOs9bXbOVMzS2ZfX2rl/MSACLYZ\nclrfzGzKwT5bvUVhAYHkXxVp9UGSAqPDiFUtfwbHx0Lb2vZBaD6tDz1vCVV2\nZJG+RDC/Qp4Ojo/hM40vxIfQcKhjyKu+HjjOS0Zz6u/uTuXlHyopU/FHud5W\n7xB0iiiaSa+5Ka6x4CiKAbFiVZe2GzCWhxOhYzf8kH81ckfbq+RBjpNP1r8h\njtZWAfdKlRtzH1AynJCY1YldXBNXT2nhHvOuBqwgoJdS9E/tyHmv5tSfRYbi\nuWXl4w+dTdou9JQd6sKmgkeDZZoGHyxrRr213gZSXl85khNxLZtt3yIoLGmv\ntxQe+OMDlAO8KnTKy7TTu+LcWyvBmXu6L/0Y38VVD4nupY5sIaiCbnlEpahw\nxhnj7YXD6QcRgZR2Cw+cTLvtpmMbjBhYCYxtwxEJs2sPhpqFLHPGhUWON7gn\n3x8Rm6PGluiU8lzAxNWeHHvgH7LK1BuXXUVg5fkOa31RHY1JFl8FXul4Ug/o\n0mLz7Pxd+Sx7jHMkFJsGqBhIU3TPLWDYGbhnI7yGJGy/nMrleWxMWyGD8nC1\nkOdW\r\n=UnxD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHD8ofiO0afTLBGBcpxI8Cce6l1sTDTn07mA3urkg3ARAiEAzoXY6WbmnwrjliqSkRxE68lqX3wpBE2jjnx8q7N3FKw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.b9b0e330.0_1621976394907_0.5505125497781069"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ea2a8063.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.ea2a8063.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.ea2a8063.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uJPQu9UY11rkHe6YAoIyo8XR+mgA6RRIQ0RxtwgVTelQHItou5lSMOT8IireLZj55U8cw7iJFru7SlWh606/gw==","shasum":"68b7065335aab919407d5188d91bba65e91cbb7b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.ea2a8063.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWZ6CRA9TVsSAnZWagAAuFYQAIHoHwTiJGint5pi0PTr\n0AXxc75mkmYbjBHKxZMmHgLyL2VRlBSAySrJLtrmvbZ6g6xGPmV59GEoekcC\nPxmkIwN2ejm5+7tAak4duCcx/VgopEFjhlVaCvphWOKbcq6U7uJ7bKaMMiA/\nvYfTUtZqAqZR4GSVlAJA37aPI6IDEG/9h+T/fh2dLQrLRSWW/QarIEvJE6Et\nK27ik6DUWDfF6Ovz1c9XKIlJnFRU5mLTAuibwb5HOzTjfyrnwcOv8OtKMOJO\nY04/ScAxesIZ5vJ6WhRZzPRyxZfdJVHmnspFQUfMvXR+cTxEBYQIqn0yJ4JX\njD6EQ+w5vsxpxzE+aIXzXv8nir82ESOK61WjyyDmm5JwJsk8Jsdk4yCUEIe2\n6z6xypi4BkZ1sBanrSmIjrmeUZxekjUaYRZDL9bADUXMa1RNyjeCr98KP7BC\nzsqxroEnpZNtbfl3HrfC3cHMU9kdnJdf2+Q68YJoEzXv4mDsDbpQtdIsyc5g\n2gqH1Y995sGFnokPC9QMD6NUND7KL9ST9egLF/ORrdXsqHpLGX5MFwebpR1Y\nBAxNeq+ibTckCWzkca+mSDdoevAfbNR+RQsJ/sZp/i4d+lMH8DhA0bf6lFIT\nGIyb6osDD0IyJ2Qj+Bg8Kagiv3wHXSoFWD71TyvDzGvqYmlUaMS6XH3LcCIw\nL4xA\r\n=FiNl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClcYtYKqFUeP8zT38hteAeam7Nnh4/kOjtU05sLEXONgIgSrtiZwb834PvIibilesy6zVGkGGZPYwZ6m9LXPVqN2A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.ea2a8063.0_1621976697836_0.4939877348707038"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.60cd9178.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.60cd9178.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.fadab3372.0","@material/mwc-base":"0.22.0-canary.60cd9178.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.fadab3372.0"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hKBoF5Ktwt9kl9BjB1NEvfwgwzBjhHuSWKdH6xHmYsC53cI667RSIgTLA5G5pIzERAz4BKpEBb34uZycU7hyGg==","shasum":"191e9c9db1397d4960b0d867d15da9cda3928c9b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.60cd9178.0.tgz","fileCount":13,"unpackedSize":53785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYShCRA9TVsSAnZWagAAgIsP/141HBHM7IHNn/DKjWQf\nOYflf09n/nqZWc7reOlMI0J7LG/6YBlBp3+Vf5kiBWdZBc9D8GFOyvhNtE2q\nUTxDZNyXIRXXq78SVodM4rccV8t2u0gvqY5yedVpcXYU30lU8Khifltxy/Eu\nAJ26XfK/KCSQAYJBCtmyFLW87NT9VB5dPZnK0aYJ7Tabn7NkY95u7sdzfzIy\n64YHSMg8ISDDwW2CfPEyd90FL4PLKZbRbnIl+avfEwhplQKmieji2+4ERvb9\nKDKG/BvfeSXVRaKta7N5nr7ZdX0n9G4u04BT3uVoy4C3+uIUmOQ3d7ExUrDk\nswB0wTAyMBP/PjQYcvp0XYm/aiFhSZm+M0am9kgvWc3rvqHtVky/WwE7r3GD\ncqNH/Zu80I3XkHsjU8U3r8i6yc741D6LLxlcL5aXFymmLzuOwms1s8XuQchN\nCglBgpKni20cZ+dIzVLvQK/F/ZRzk4PxvyvMbMDyl6DEwG/Xqrjyl0paI3x/\n6p+xV3DoeeCteE6d7KE0FOFHNsaoVhvlxp8T8na2y6DMKqH7HkpUlHZTW/Zv\nBVqzt8MHsAYfI/WXhnj83GgB6AgayxdaAh5f60opm3eKjmsqh8vTidSmWLvz\nOTlTBjpU7/hjLrKVnSu9gN6KCyr6Qnb/cPP+0xMNV6OH56uK8a23F3wEAUyI\nxeoB\r\n=T7Bg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSUDESjCn8YQ0vqCE678PSJEW2RI7GUa0OPn0Z90aJ9wIgPgC49321e/R6I5WTO+WBr+UMkLIk78J4PEavR/qL/Iw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.60cd9178.0_1621984416744_0.9951504983433301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2e2c75f2.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.2e2c75f2.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.fadab3372.0","@material/mwc-base":"0.22.0-canary.2e2c75f2.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.fadab3372.0"},"publishConfig":{"access":"public"},"gitHead":"7da0cb4191a309db2509b3bcff390b7ae8e4619a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.2e2c75f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qnj+JYhgPZZShK5mve2o1MwM8rzuIAkFtLFRlnYk7EYeewKH3GZkAeaA43tSouaHfU/nYviv5TQPtIj5SBEcUw==","shasum":"4e2c9d63b3ca9d03cd7bf102b56470e4d42d3cab","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.2e2c75f2.0.tgz","fileCount":13,"unpackedSize":53785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrZH0CRA9TVsSAnZWagAAWZ8P/j/96pMz1jmfh0Wi94U7\nQC+lLL+HAFGUUFGRYZVLQPTuhQWpcXDhGDVssrd6cE7HcNT25IujgVHR80lX\nxxv0LQEFzFye6to0XLMt4VgY70rtyIjMizahHUClMHLiQ5wht+avzA7WDNtB\naBgTO8gXH7tSZXv3wEPz6MPdkRmk3LWG1r6q9xAcmqsB67Lo/MG1Y0de1ReG\nvN7Pyg49yu1R7m7UpZk2YBdLwo0MBW+cXt4yFiLhBY7cgsfJOyC7cblz2DZZ\n/OukFLK5P8QExowq47SpJkPyzUvM7fW6KwleKKBRE3TH9W17oDl0CDTzvHs7\nZbzlGYYz261pn8+LGXHO0p392lJRUz89hi6LKOh59NMv9fnBiOKf2khQm3OO\njPJujnLcoAvXo3EfCYa+sPbqTnh9xH0G75joAwqIAgJGIZHWdPyvLRRHahsc\n8BHvBW9+WM/dvGmbrRbsW1LLla9Usb77RhR+9DAQLpLf4hSCRlyTuMRKRH4y\nh9crsGIhcmGpDzcMtyrdppM8NW3wjLrwLqjuHMCGgiJd8+uJWfqRW+3wT31v\nC7fGl3oQXFIUAZ+vVDxb54S9Z7UVmquVyCrwYbO/wEl9m9r9nR10irI/TaW+\nijgBsUaSVHwJEXSWC7ifZZ8FauNK9B9xzJO4CB3HtH06iPNlcTg8+oZNU/p4\nxkNn\r\n=dztP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClu9Tji/+1PVwmw3jBeyFYKfekl6UwbTKcmtnXIgZ1ugIhAIMIueliRbOmGnaIdKGnKPAOSAaeKkhSdbrQkBZdROpB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.2e2c75f2.0_1621987828067_0.34257252916153"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b99c77d5.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.b99c77d5.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.b99c77d5.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LESDX1+sORLRK3cZaMlMigxfZLG1KE7NM60LKa0A4Eq4bQFVLDAu1Q6DawseXiqAvJ4GdekqJLXILPeQO3YQoA==","shasum":"7633eddeb2cdb1cf0aa03d2b7dfb065c4a88fcdd","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.b99c77d5.0.tgz","fileCount":13,"unpackedSize":53785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp21CRA9TVsSAnZWagAA3CwP/R7c+f/uaZ32EMn9r6vT\nGuj1dCoy+cgS+hHBoPEc6/SSIv5qzCS69vRFpmmDKlP8bTs8SSMGlZiWj4+4\nl+l1KlmzSsESCIGO8kdwS19rQThP1pqtc62kqldZmZPgG2udjE82Dnxebi3M\n1SllVRLJBXC4CvTh1kr+55jzGSCjxmBFGEhut7GH17RTBUBP21c9gGlV750J\nJ2DZxrDf2fdpIbO4WCWLHNgv2aI0yBVPgrKb3XMsiwnqVXIfphk7xPy8ZbHh\n3P5qluYU6ddb1Z2X/MCuHw654cbHYV38cRhTE1V8bsKBLT8YoxT0uuldgrc2\nk26liq2CvzZVpsiaJrXT04qcBiFEm/3PNH9PfHjq40213t5tqMNozYYgiwkI\nEczixMb5yh9CHZMAex0KizSwR7b6018aKjGTR2FrtdBDfQwmOXmbaU7uNwSw\nUj/RRDgovytPm/I0sxL9rt3WdqNC0EFfnF36WkGIrHEkToWyftg58rIyZI77\nvYPmH+859KK0HV2ECNRpwKx3zwcI6TMlZlgtKeN2jjz9Fqetu/wdG2eCJp1s\ni+R8ium5RfDmGOfLQP23dNjD4a2VW3peYBwVw136kq6vPewTfX17FkLPdJZB\nnoylrc6TFAwpD2mbtqHh+tk5e9l9hHK0NAg8wY2daSGkyFK4kwEezUnX2hkj\nYcCb\r\n=K98n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGzpZQyDrvsBDq15ztydnx/45/JN45lTpgBrvkNoud3vAiATZ/tPHkhCkKKy0X5H4x5HkguY3/fvXWxhMrBz/7CXqg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.b99c77d5.0_1622056372727_0.4796670350625236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.0de82c12.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.0de82c12.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.0de82c12.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8TbdkfVtNvP8G2y2kKsT+4eeMGXmAFRBngx7/9EmfdAle3DF83XxyyHU1OpzOlOmijGgPO8sZdSDVXXSxU6z3Q==","shasum":"2e5170a3dd411039db0acaf23c0e2915bb455a84","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.0de82c12.0.tgz","fileCount":13,"unpackedSize":53785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr36CRA9TVsSAnZWagAACMcP/33sHNQgI4Xh/3+QquaA\nzJqZ+pJSBSmCHC1N27uX2D+6/XfSkBrGLHUx5pGuCseIuA6GH1z/jF4rIpK8\noFy51bDgfX7GS+hXIBQg4SPw8JAsvref4ijQEYjKE6dA35W+K2zJemmYmtUn\nZrBrx+9hwPMi4FtEfzsVi6pd8XC0oIQNbIo3YoUNwmo25L1AoErlys7HHJ6o\n0y5MNMVCJ8KMMKZ7nte1npGd2HFs2i7BRoJjlreapMlFmbfDDiTroAsIb0jJ\nQRJRqQqERDc54VZF48iujKQswEO9ESD8GVXRcKJAVGUKWQIEAJgTJG7WAzn6\nfNo9npAOLrkhdJGgM1fe2kps7TU//iek+cUoiiJ9nJefCstti6sTTBvYhNFb\nuI5zMIRS2OxsHNsdMPRrZT4nSzvUBwC7KIFbwnB18N67kT8yOZ24v0MYwXmd\nJKMb4vY/wKpbHhEoAXO8gFhbBdYCmVuLoZRDBb0yXoieCxe+2BnPfMk8GqJp\nsDz03Aou0saGKpmqhdv6OTewcyv/I6Se1MqfQYET2Ho+Vfje8S2QvoXoYgw7\nyzXBq/H3qHYOKktppbOVTwGsdXyO5BjJRpcq8N781lSK1ealCPzkqqLxX8h5\nIxA8McJ+UiSgaQX26KISjbNx3Oc72pQfXXPLZNrggwS/avMoWIpLNqATZj0P\neZmt\r\n=CbtA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEYYpbko8vE950uc5kflNqDB2sIlbwEwhXO2egqzOk5gIhANMkhneKMIxhcyRiw3ZfV+REAhzZw16sbZNjw6ldD2TP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.0de82c12.0_1622064634497_0.1031572743816922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.227a4614.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.227a4614.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.227a4614.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-x6p0mADNTeRO1QfglaeX8D7EwonL8zWXHThiIAfprBSbug6UyWW249VlTVR7z2Rdu0X2e+U/p4FVBBREWbjy8w==","shasum":"27448cda84baeae70fcbecfc9f6701114d2176fb","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.227a4614.0.tgz","fileCount":13,"unpackedSize":53785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8KfCRA9TVsSAnZWagAArXUP/3G4eiHJtB4PsrQewfqY\nBA0ZmT72JKWS07jCtV5Bd9blrCrVXTseCZqsnsuF5vfHS6GQ8kB82tBYRfZv\nERZ19mjGvj3h6750mSiOYyWDspfg8KZ/+tkX65dTqyWH29LO8APcEZsgApIK\nlql1uPFq1VGfme301TgDv4mjBDorqUkJsFN1O1Vg850o4elTUJ69G5vCeWJj\nvGDLsWgC5wnUBJkgLgmTmn46wKTZ+CxBVxek3fh2x89eqpHx3MCIJwMJHwdg\nMg3a2ozgz6Vy+nyz7ACFvZ1H3OfdNOjZzCQmxzrU0JCaRI7TG0XlPgiXIVWt\n7azPwg/6j/VKUF5dX8L1YhKaZY5Cz2hptH4VIeuH2pS+UfntAZwM/uZjL5Ot\nobH+X/fMAb23o7bSLv7ZWL7A5u9wC+5m7M5DvgowTs1nCutTAkALy7EFQtd1\nbRyKGad5z+bEKlHtnp/wYIVSLgTQioxGFyDgHoMww9gxEI9jsJdipcRK+1oY\nWXzrnTYsYwEVL7TlqwcUocB6lCi4dzlmY/1EYu8FGpNLTfyU8Ud8huKPCfhK\n7fYegaa/M2RdPadiOFeZhflLOaDT+uXiRloeawogL/CjSBI6XM7xGyPAJ8eT\n3w/Fs3gnBZIYm8ssW02ksMlqEmB9zPIaynEkcxT6pIfKlITDdSZ8SJEom+3i\neTHG\r\n=38XG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAwSIZpQBHGqT3AcDR2zWRzVXng2HUNiFkD8DkSWFdHcAiAwVAh+5XkbPqo//K8E4HqlgybRs6cqNAPpKceEB6u01w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.227a4614.0_1622131358981_0.9856411856159819"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b3d21d31.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.b3d21d31.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.8530d3514.0","@material/mwc-base":"0.22.0-canary.b3d21d31.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.8530d3514.0"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Bq6LQbe3QiIYZEwovXYuUWdjifywrHNqrJMUV8Xd/LI2u8suCbqk07oT+ghKZwMIJtmOHXOKSX5bHP/jR8HHwg==","shasum":"85008344124541855e27f92f8ebd5f5fc5f7ab51","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.b3d21d31.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+iZCRA9TVsSAnZWagAAnWYQAJluuhr8woRYhWY0NREh\nkCUH1RaJyldJvordVGqUql4h0m9a4TQJb+se3XZa+djehfPhRNkN95zxdUiX\nM/YFySmE9s/yeZOLRJaLaxuI1k3m575HeMt9wwKvF0l3z7RjhMHfdFdSi4W0\n/qVwmeeRbtQzffl+2ziBJn92KUxyDrnTly155T1ZaXbXl8GtzhxVgogmYvvX\np/I2+H9gfV+l8k7Senovqd3+Nsd0tf3f+cFzzBQ6T0GpGy16ATWkvuTekuNn\npo/vIOWIS2dQb5JoRSdl2h/od0gbwgnCgNCBKrJVfh3OrgnXMqlSf9IdTfyE\nSheQZKtEpPxacK4WD45FVwoy9r3f7EUxiGmclVoAXdsZBimJSPhEDf5JOoBx\nINm1y1YAvVR0KKNZvSk6lrnRHoRdosbryz62ZwGWwGmBVy9unUda1hZON1EI\ngUliHbA+gTlCP9QuQPBMClYTtpfldERr/i4QVbGu+64lJ8IbydFKUXwnHxmY\nvWdJNMWXrWUZ9O4+UagVQ8oXPJGpoKIOhCeHDoabwM90GhhmXtZoqns6N25Y\nHuWngjD73RhZDBRbMhqAsCW96x6L3sz9UH9+QQGLlvneJ+rmq/cX5rDYnUx5\n7osb+UHr9uoKudffYfQMPl/iHtpeBL5lb6hvhmrz/6htcKVvB64pZEnhAC1Y\nkOrX\r\n=rUkp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqyZifVNXLIwGpBXdnI+xH2BGxPFWGkm8mF5MT/5h4FAIgAVpdygS/ha2BV5ZI0ELFIo8D3PZJO4Bg2+itqcwE0ds="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.b3d21d31.0_1622141080847_0.7741210170471247"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.288c33ec.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.288c33ec.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.00b5899dc.0","@material/mwc-base":"0.22.0-canary.288c33ec.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.00b5899dc.0"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Bt1Ib+uciimdGQztkbC8MSWI5etcG71cahNRvhzrMsheWgaKoXi+TrMcL+z8MnGfNgH+KINYaLZG6AM0dO1u6w==","shasum":"5fd60be901b8f388e617984233c88f6483adf4a2","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.288c33ec.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt9zVCRA9TVsSAnZWagAAMQwP/3LDeoaDmTI/BpnplDr0\n8dHr9mz8Uz8G1RaTXib9ca+qnBbCeoa3h+Orq2eFczZMIEyTkCqj6orTuj+A\n+HdSHW8mQtBhDvXpOROzCcGwEZCc7lf0egGjBpkRKMT0zFp3djyVp5PxSI4s\nZl1xof2gZbmAtQKDJgJ4m0ZEW70BM1g298XHf/+Z78r+GJyvgn3E/RxMI6kY\n2Q6tdrbVt8G6PY7sQE92Izz4fEU84Uxe86wQyWg0ukhOh9WAF+ihENZzhcmB\nAmXIer/swIMdWxBPcJpsJCHGbb2TqJBH5zih4sRSyAcgYuyW6S2k2Q1yLjwv\nyEG8E7Rxxh4Sxjifm5q2BmlNLiC0bZtspKutcC/G+d/y45Rb8+pN/uRwWOZJ\nc/FavJ1PIVt1hDprCLwBW/6Iu6GzLwdqh+wzUUPvgCeUPUYlkUmLvAKnfjRR\nU8JxxHah0mlhRTiVMKoafJ4tBtjJwvGAtRUssKAmsdOjU11zVd95b+xKjVyh\nOSC5iPFawKOQ0j6sqRTh1QN59G8qosCmybTP3RzM5mwaNkWqO6nLeK3kx6l+\ntWvtmrbTSK+I3sta6XQwITjGY0hkX1nuBcgB6KrCmHBgu3ZTTaXy5P8lcZjO\np3pzWUFXIzChaYT+p1yQPM6Hfn5X1jZeseE3rL0GhmifZcwDqQdesVnrB7Z6\nCqrk\r\n=2XHz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBVn8DLFRmagcwf/2zj7P+BQF2CY/03MZfWiZmqX2dxmAiEA8lLyUuvy/PQqjtqgfAcsY/Kwg230mMBRWRYMyHgAQXY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.288c33ec.0_1622662357718_0.5606394867359539"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7eb7ccb0.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.7eb7ccb0.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.7eb7ccb0.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mEFU8GYqzq3GhTljDS/OcPf5oWymopdvhQ6zP1HH9EWWOjmJBkn7h6oNkO4zrILpM66Krsrn68LAIAkcgyo5HA==","shasum":"f57a3b812b2aa79f450400b7f145ebc35e14951d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTN7CRA9TVsSAnZWagAAMkMP/3XOUfhCs8aEmDcKbfTD\nV5lMdQQHpFUOiVmdV0vVk62xdC9w9/4eKfNRi+kvJsStz8aODkjPMXIpMqeE\n3PkYOxuHAifEkKaV8zWUUne8ckJdi0hrMZMn14zlsxyWn71QdZwJuc04fERs\nmSZ1JNuu+oaEQ7eJ/w83jnblB1xboucxa/nuWnBRi2+5yPecqKWmDeBx8FKU\nYegSLJFPgGBcHH96ySlM6+UGfJohmM6bT7K8Q3YsdYaEFVpUoLlGjPYpt7tD\nwZ4SaVI8jboVNezrddueoIpd6NfEnibMg86lddaGgBbcEhJRpZoKyZrzfwQd\ngG50s2yGshWmqXbgnVlaApob2W3Om6azqSwr67lXOkTul7z7tBeRRLcUBLls\nKzuovBukViicCBEQYzH15sbPJThuzEIErMsUdHpgx6tZm7xbTDkEvt28CZyb\n4dJk2/3OTggNJX44wTYx2+LJumj0G/ZS/voEZFFJAtFm8l9WINbQBf54q8Oo\n2ev/mpVfHJZgwGpnoAHyfOgVjJnRgdwvXF7q2bclfrrC/0NE+JFS0bG2OA2T\nKBRWJxujtwInajrDOdLF5ZQCRvaDyRAXaL0tnpdE0V94OxD89ElWfr9u7aMy\nc0NejFgv0WV176lImpAELUxVTE8J3CB+tZoP7yjPKFkhwIorTS4eNIU0Q9dj\njZMq\r\n=mgfU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9Rom41shwToVK4IMInEMJrNCdI8t1T9lQpCGFLPK1oQIgQAB5HFRI/JhUBulDof67Zl5loOpiJ7SW0DCyWfrCJDk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.7eb7ccb0.0_1622750075430_0.38672002269401795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7fcc0726.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.7fcc0726.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.7fcc0726.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yJq/4j5BC+n1Ayl79Blu7lES8R1MheyF0/rFxij7lpeaWTUH8apVc9yktjla2A3seqMEarzPwKwa/fGMRwJRFA==","shasum":"524b974c4da13d803124a6c010cf9d57a2decac5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.7fcc0726.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr2PCRA9TVsSAnZWagAAVsEP/2eqRig4FGCPd3+158au\nI2CZXsWKGPMS/A6WI6XP+2Gfpl2wZl//6e4s1wC8tYhtlMb3Q8LkzwJLk9a5\ncqnE0BBWt9ha9xNmLvVavh3bDa1+TCWyEXE6ipNDZjNjpTxL8dMoJBFBo/Mj\ndKYIu2mZyJ9Uqt6UF9p7civ+gdMsoaEFkBenTaP7CAHOz4COHVT8DEq/3FHD\nAa8ae+DDpvr6ESsDIgHS7tkxp6wNGmNRvQg0DhTd4iLIoHPsHo+KBs2nNVVT\nS9fCO571uYswU9fXW/TYU9fnxcfaq1fGApmvfxR6wxxa9tomtRoMCt4+CiXO\ncYVuO+gl+Uj59yJIPe0qiNAE87dUdSGztgpjrKjP5+iZz6IweTpGBBu2369B\nttKZD/noeEP5vX+ciKXLvfMKofMigXIal5aaCL2IEMeD/8x1fvDzuV4q5Mse\n6B86EWqUbGcgqN5VXJ4vsXAadi3bNk4wAPotkkgUgiAtZ8EEq3p3I6gi5yKG\nqxfY5s2MEotLvmFs1UJm/H2jb21mI6g0jNXKY0ZWcZdxJx8xuZ3T52T99nUD\nZcA2xtoVrzhscSyBzOHjlJJToI1mkEzfLN4P7S15ob5YlM109ln1BtGb/+dF\nIFj4k6RWawSctlNpihIWH2MSj3VUttVRh33Z1/Re6PWk4p73pmgi0qOLL59U\nch+X\r\n=PmA/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICV6K/H9eaZ1k70XwvCpyAMUInNka9/PBju+0k7EBVZiAiAKTdnrpMWji/5TTIU8Fg5c5Ho6jFeGCxhAbrsLKEuvTg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.7fcc0726.0_1623113103620_0.10972929347545768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.220a4e5e.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.220a4e5e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.220a4e5e.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-R6xleugYwGZdOb1uo1iX5wu/Pc2mkURxJzdoCTNVnIH9N3hI+EZoYO9y4CeiHYlx76xqoAo8r6QyLv3O9t+u7g==","shasum":"3bd1ee78552505642dd836121326509a3b5c163c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.220a4e5e.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv623CRA9TVsSAnZWagAAapgP/3WdmtKYwD7GcwFl1CWd\nWzzuzcY+yf0S/6J1//zTSQ5P4yNqNklMu3XV1aY6xWvmDr/e1dbmPBvFO/07\ng4SBSV0xQIUmfEbmarRCMa37KpafXVpUhFzbN/nbsUhzBrG+4nBcREQtJShK\nrb1GF71czHo67G0yL6vm42643SrmpxecwhaXYULstqNsMW4+6jYJqVQzOPvK\nYOx5y201fX4mWuRNkXiwD2B4GZgCHFMhY3M1PhgFEjfDPsDK6pNJ1LlsJVF3\nGICZcTogMHuN8rknpcaeMbvOt6wFUAxEhNmPGsumbiQrm1/YuQkmZOla4zMz\nYR5jRcB0cQK0wdVUrbCo5Wz3o9IFQQjWAnJ6jOye+zQ4XFZm1hh78ADdtn5w\nk4ZQI9KqjCkao/UUbAfcbgN/fhzt9sULe7pkecD9Ub+uczUsvrmII2AYUKU7\noH+mPr06nEqYoUvmv6ztLEc+LCGvdEuqQ3ATJokdagjzeEAr4xN/lmQAKB/Z\n5SRLKmP6AbhBi7DQ1HEg0eJkNhGEjrDBodSyQUWdTNnGS/3KCkHjH4PtZAlY\nWqLiAPGJgRbefoN992+1MT3tCegEo5/wjl4Efdh04lq72xFCerDPq266kWid\nxX6B0qOG18U8brCCDrl6O44XNevHLiJOMI55e8XmE7QWbv/TsY9znBjiuAz+\nITt1\r\n=yLri\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA7KdAWdEqBC9aeIbAe2X6ErxtY8sL0vv6/6gGBjeaNyAiEA0/AW/Mc/T27ynSj0oz5vkZ9m5+E5QO0uRHhSesXPWLY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.220a4e5e.0_1623174582851_0.3933713168274662"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6b2d6ab0.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.6b2d6ab0.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.6b2d6ab0.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UeVnJNDyPK8xrhga6c6FMGYm3OVhdzVjmQeNfDgPjRpD+LXFN4jDrmDsXb1WAA2sXNdcU37XivinTl970zA+Rw==","shasum":"2a22a52a1d410ab6abdd650d00409495c877ef6f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7iZCRA9TVsSAnZWagAAo8wP/29DiaXQAoRI9utp3XyV\ncKDxCboojytpy5OwPOKZO93eLqVQVeze3pR3wcyRHh2aXXjasrl8y8t/0sKk\nM1SeC6PIeT1OrOqH8zASMlZvNCIljwqXXB+QnV2yck4EtRsi0hO7KAX+kD4k\nEnuXGkGNEYZXEnWc8ErFrRTjLCWmrPAA9ZmO7XERldHyL9hM2ziW9LsSw648\niiH9pfsdvBlX/ADMsiJOCqEM/uavooNeyBlXz+RsQFEjKZzfA7UTiVws+pqY\nsr9jh/7yqo96HtDgwDlxJASi0o0iXMm5gwaajKC8KFEbvYxGKRIjN22gn1lx\nz4tmzlZqKyIZEF/pXW3HjuiFfgP2G6QF49OpxInbRFjNTLUQIhovtZ212De3\nu/pcBZzPyP3fsZOcGFIxfeS7glkBCmmC0G/7y6azErvqblG7gLhE+SUS4qwW\n2vQeQkKpRj6UNrZ/hfohdews3keWaOA30ot9Z74nQfU9iYR/au5tDOySV8cS\nFyal04UKlS43NE/jOcTGD6LS5wGvNcrRn1+roeA67VQCrqn4QG7NFuBTy7ga\n6ydk5lNIwIsuJh3Wdwu1U7bTsFfV270ZrIchnrKbBu2Upv/oohEdcJ/agxc4\n08ADO2pGB6XP/8hSia0qDch5p+skPGpGJJobwgXJ29pD0T0NHovx++AB+GPI\ncfG0\r\n=v2EV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwxsi4zzv86dI6pJsZE5wd52oQKYOoXMDi32FuiW/LEwIhAMHCUgcM6flVqThtGRzo8D9lGAOtwUszNjTks/Yjsoa1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.6b2d6ab0.0_1623177369708_0.626828065907588"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2b20825e.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.2b20825e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.2b20825e.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.8415ae585.0"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jXOArZZwvKyYOWxI5aI7phOPOi6G27aoVfYm55dpWTLRGc4ey4YNgFqmsc6NymEsaKxJvhWsKdr46LkxfarO7A==","shasum":"e89b28f817f3a63c6e4f1c1678f3db76510815cc","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.2b20825e.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/ZWCRA9TVsSAnZWagAAiYYQAIV5DTuuglRg4U7y861L\nXmysWW3ZNAVguto8cnjqmOC8+bI8puZdiDGz1ullPS0vCrJyAAhsn+M0mSko\n5rXzcSFf6ooBVdBuG3VFYpcVXNPW6ss1JjosUlcuxVJ9qVnUToQNCy0xmwV8\ngscTDahOvAxWPUn4OUs+d6Cr+of7CvtBQjDGPnSXLXiFo74iicyRv76/4Z+x\n+AAzMaLYrXGqje3hQU+jHSt1GAImK5a1vnAtH3M1cUKfCuQIgUS20jTek88N\n6s8dMBy9BYeAxhuJp/PWS1dNsJTG5msywm1y1dK/2aXHOXhhbhFPyf24yTTq\ncC+hYd4VXbUBcWwmvIWq5UcY9i/7nUI2oUD4pGmQ+ivnyAXZHbVEgX6Z6zs0\nrzBR8qWvh+Ii7cNTsVL2ZDWwCaDr7+lG2FWTAJn8tQbAGBuWldRBLjacbmts\npDWA1V8Y/NhtlOQpQfrxH35e27U67/TPCjS/PM/+X9lpa0chqB4Lx72JU19P\nPZFfKsTWXqHhfC/AffzYnjBbnwsyADUY8qNs8WiAbm+K1jOJT6kXIbWb6N87\nZHNHRJAwgVWdGU1Bdx19UFeLfQXIDyEEmbhj1YBTnAEP03JIUxDI13OBxjS5\nuRGp7EvbggZqNGqeaS46Nmy+C7iVErdcYm2Atb3Brn11dmAS4jTS6ye4FDwr\ngCo7\r\n=8+js\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEYzsQwe3XOcs+Em4wcczAil2qB2M99SCWy9G4a+R4xrAiBG/c2jYR+vGUNDk7vOoasvSm9RBOfyuVEoTMZTd1wFKA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.2b20825e.0_1623455318704_0.6822036107116289"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e1511867.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.e1511867.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.e1511867.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.8415ae585.0"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KBls+bfbUmhwEvg+5zEmIbGbQ+kX+Bni0DCvgPxWQ3sQGGQmO8GN+xE01AmrpmVmsj0H9bGUt1YnDXdxqz+V6A==","shasum":"922a5c16c6c7ddd62c89b68914bef407c6662415","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.e1511867.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAZWCRA9TVsSAnZWagAA9isQAISg1Fk3+4+gVythxNO/\nmzImT+faT8oukbfYVTR2EqtGBzUHN3hFcEqeZagD/lMrN98omy81HGLTzejQ\ns6ciz2/rrr9j+hvAPLjRyD4//KHNR5vTKgHH2ORg6GeJtzIwpVWnqlM7FRho\nH0c1O71W++7KVK5h5uiA6hJURjcF5sqVh7f7X1k7ey9fikQG+h9OVUnCmfF7\nIQTJyxLjusilDUByVF88q6XNyj5mh3KktqHQQH86eCnbnqkgvUxQ4bXwnBpt\nu9Y17IEE7aCoIGQR2nMB3pmNYRE4D/ukXjjYl8iaKsRSSlt3Q8J1s6nA716M\nfxf8u/vEb5ARqjA8+Jynzm83oZkJvm57l+EHaRPLld91P53TpI/UDCx3Yke3\nlJgkdaTflYt3P1yRjhMpKhteccb9qtbN8RNXlO4MgDluKHhhwAA4CGXwaiAf\nWF3RwVBKFPfeng/udtrecNPcvgnvfMvWCpg7Ofz2tUtkhofHYBB3rxG6hZ2b\nV7jjr0Vhva0QZbDgHexSzMR16mAkVRR3fW5wjR6x7g6+J1psneNuwM0tMpiW\nhsidSczdv65tSbVbgIA6zuccBRa+3WZpoYD5ibl5Acj8Lgam3PgiY5yL3nXD\nqrwq8Prq6XLHnGido0NoNppqjrze6yD6K+QAUJ07e54nZ176yWzxUTwhUxJs\n/a5u\r\n=VAd5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwKahrMGsJjRFnzZUZRxpHRUox54Sy/MOxK9yqB0QcPgIhAJWnfdE0yJ+5sxAA3RQkcIOodCD2yNSZL4vUYGc37b2p"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.e1511867.0_1623459414248_0.7171249643121029"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ef4a0c0d.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.ef4a0c0d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.ef4a0c0d.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.8415ae585.0"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7dSvN0pMdyfVJm2QUtsrnNBU1Ijuv6tIfb6IAhLJAOwhxAYoqFUsWP9DHbni6xVb9bJB9yi9s3xULfork2mV0w==","shasum":"98c2c91584e121e3d8f7d33abc63c4460a9c9adf","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQS7CRA9TVsSAnZWagAA92UP/AxuzO8+khgDED7D+eM9\nTmsUD2/B3qURICW/56eYxVld3bEu80cNbPi5eGIu5uBV2LvtJMttoifZyUl6\nlzV+RUIQmebrWMpdyeNIaogy4Eig2/azUM6EUz/LqDfbh10e3tyIIijsIvVL\n+kqST2JCrwSM3QSmynaNJUtSuqNmkbp6uDMqMJ/A5dgbJhYZ2nLRXjeqqat0\n7OJFs6ApbG0/8UZJDLMnTeEhEwTgt4bpD6PwUkHaAsxXTGptudsxfeCcDUY+\nLbGrGWY6aKN0lMXnnaCMAEU5iDQmhh8GqgiPTJ9IJCbi+ug1QWbv8McwRkDI\nVWOMBA0L3McgCDVPvvoEARbEdNQZFW4pvc3INFMfCQRVXz3JC/i+Cxdye7mR\nHPx5JrDM1PJwnyS5xKaEmzpAMLPzuIo+sVIqHWPp1oTS+acPiwK3geMKNeVN\ncM104gZp4tn/XZVrkDSPGDZtTKuPR/TnJ0GzwPKAmnlfWIzWWDOmxnUkJgTe\nffYPAQgnD0MEW5JlcLZ9tylarr3suGxGwV8nYi7FdJunbqQIwmw1B5gr5MRN\nmOpa1TlzPsKY2Mto3pyL+ZoI90Idm/ilXU4Ldpq9LGDSDbdCWOMIOON9wddk\npOWCA/LCTGjhuxrpHYtVsHL3i7P1fRJLPf5lhWaRyHiItNZxKlR5W0Do0aa1\nkD2T\r\n=DtwZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGliUTprYxDhVmAoaEb9eBoxGH1PXtnFVkDFwFl+l2pAIgRRhJ6ZkLJDApZ5GNvskRvO1suSKh4mYqaqT3K8pah3A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.ef4a0c0d.0_1623786683758_0.7145699473173124"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.573d8913.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.573d8913.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.f705e8048.0","@material/mwc-base":"0.22.0-canary.573d8913.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.f705e8048.0"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Eryo7XP6HEGwIH3AqnEYIP+ZvdOoITa4Rfb1er8CEoSX1Gs7fQgSBNT6iWlTczkUw4ps0bZzWJyiEPwXC8djTw==","shasum":"d2c6082a89324879703b9299986b67f7097c6562","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.573d8913.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSuXCRA9TVsSAnZWagAAQ0IQAJUSs9NzgmqUwm0vg8Mi\nkrewdjr6gbkgy128+0g33HKO2bqEhaTAgZRAlE+naNGAm2sOI49lVLdwP3ml\nVQ/pJfKf5efO5K5e8bWDg0ZRcODuohkXJJiR955p0Do+E14edqIfLPhZ0RzF\nZ2aml2uOeakc9377/jSOIHokZAg6Ac5vzPBmdHoEQ95CmNC6wnYvxc6bFrmV\nmrz1VQGgfPs751WmMXwoPN8nq8LWiC5P9vKx+MALtbBY7ji1KPHs7+3taU6v\n9gGDrOTRgnoO/bRjZmvKAivOTcwUh99earzw/4SAgX6C/CC2sUey+Il8VXFf\nDkCiwQE2r9fBWH+p97JTMszucH3MDdkBEEIIi3UsHMHDdF3qEL6jb6Bwdwhb\ngr0oxIZrutoqkNZlUkiHOfKnngh45gRPWP2ObvMkDzvarhGqsAY0eVUJn8ru\nP1UPAYvk70B1fowYFTCZDFP9q++ZtGEMRwzaPeVI9DzfHgBAGmxg5bG+jchy\nVBETCNrMNL0Xo0O9jPG9yudh5LdpiqxQ/i+Yuh8VNQP/sSE1SQPl8R01J1xD\nFMLyLp0DbS9Iu80eogEFw70J/9cadZJOPn5o2k01Jw6NS0moleorNkwYQ/gA\nnioA2GhHk+wS38tGPQ6UGTaCLQQ4bk1PdzFA698FUhoqMYI7CH4MH5mSd2Do\nGFke\r\n=oHv1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmzp+1Y3uKA3mRJATCNRvVPLlI6vlPWKhrHInJ3xxsYAIhAOKqmPoA8t+QQNYm9BehNYcxjcnSBjlyQqrkBvPxhVOc"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.573d8913.0_1624058774704_0.13256666067796163"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.21dba001.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.21dba001.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.f705e8048.0","@material/mwc-base":"0.22.0-canary.21dba001.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.f705e8048.0"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nR+BRE+GbuBabFbGBULgbFFjETuAoiPKpb9VInCj+z3RQflP9rnKwfUoIjtZ9M66Az5lcBFXxbEBH279S1yKlg==","shasum":"2c46aa1a479da0fe17145651425c8f9dc9332555","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.21dba001.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0Qc0CRA9TVsSAnZWagAAU2IP/1Hr+eZhfPxZ4nx4UgKR\nlJTV9MTdQRvdoiHl3ljaSRjPBA09zq/AO6J53/DkF9x1h2V7OJADDRQlOMxY\nAzMijAlUt23MNMApeFbuGttbCLvbzDfUjxtAx8Jp/lSg4M2RfspDcw/45E+I\nOTuZJElcD+0bWKIvz/wtNuhmASvTXQ+n6INL6QPctgmIlb1nWoUVcjdAUIG3\nuC25qRHOZVkxUgMTCGV6GfDfZ85Le/AAPOcKwkhNk+rrvUBh5kYwtaRZRqa4\nLQvzANpOLSfkULCvHvh0MqopSjUcVQrlLldnTxjrqn8N8u5INZ9SHDcn6+fR\nUXAkrrIXm2R2DD8n4Ygw2NeuVLxQxc//F838Av1qbmtSb/3tKDuLwDJRlLNs\nj9afRv5rHPh2DmDOq9Cgrd9ywrIEiPleY2au7mlIWz42/dTvqOW7+sqtD2mq\nj6bsxlGz6L8G3TTe9h03lEKBE1Hivs5/u63VuZe+XpjRiezo2JpUyj8BNRj7\nHX43wABuus/TRnTAp1dnkOQJfXKHC8Vr5VgxxBgLIijIaV7j6wX8ZV+TVl1h\nukEPrKhbsKRmiNu2s9/tz931EUnbkX5ocVmexT0E1wfOrD3h7W6sf2t+igcE\nn3tBQJHxUYwdkQdCPz92er3TEn0rs0psHvYcHYAvRlG1Qqyow2gLi6DE/TqU\n5fd0\r\n=bMEX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjZUdL3fK7piRUh9YlHgyoQ4JvaMDQyPSWj5qgnaBDJgIgXz/ThGfIZXNfpjMEkSqPtXKyWugJPgEC/JdWnq4LppE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.21dba001.0_1624311604168_0.35105221697542977"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f5bfd0f.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.6f5bfd0f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.6f5bfd0f.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PqIJ5h9o9YdbcjUVL/LWf9XAn4bZU4qnH5zvaOe50lpTbfIZ0O7G53wfELhqpNtveElLuRwTEG8YHVvD3TaNfQ==","shasum":"6f8f51f05a3c24a87587992ce8d6cfd05447c1a6","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q1oCRA9TVsSAnZWagAA1csP/RA+QOPVwUPJQGC+9Svd\nAQO6QCthZ/zC9jLb+JmoOXm3F9XfUa0XVJJ8rR5k+i4SuHxnm7Jp6dUz54CA\n0PILBkxXc3CWcGYwLuxP7F1bQsXm8fGJNKs0EE2h0NVbIurPy1ry201WzSEA\nEfCvGDbZ1W7jxIrfWjotvoM4ktsQCzIGKJvWP48a7By4Pt+W2jk3NujnLI8j\nLHoRgrdADcdMke200LHZnx0LRxGSJhJgjnxxp8IGhHBaKQZIcl+Vhp5yVQ4d\n2MkQwi8XOFA/huRnL63GzcQhUM4gfIbrTNQsB1r02VYb71mVziHAM4/YL+t+\n4aidOwlya9MiUcvUEN4RHbdTHfLdb1SKYUDeILw+Q/c3pszA8DfojW3YhysY\n7Dsc3hgoX3WM8ZO1eGKw3YOjxYmzNYpxfmVagNZnNOFryC6wbbdfrb4i50BU\nF1b9EjP32x/AWXVCj54Z1IqomcYDUQusV7l7IJ39tk6bFPYhg7AUVVkax+aw\nHyUF8Zcx1DExs1HQqm4HPyRyjHNbw46B2Eljy1akynwk6d14y1aLlkws1DoY\n1ki9kV4luXweG9I6w1j7pYF/OBtCnGa4O8ImxJszs/vwK+hk+pDdL9xC9Uru\nk+v5bY9wyyipTy0mhDZ8iO6B0ktMXZ2iS5a8mpqGkQiGWu0ivU7W9mwnCqbR\nityZ\r\n=NyDs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQMDmZ2T0ZEcd5jPU0bvBGqak28AS5TKQL+4SAqQrdrQIhAIoIxW5TKVbv5dfut5ObxFB6FcGpuww2e+FjBNxkxEpl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.6f5bfd0f.0_1624575335898_0.4373012956578628"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.fd8360b4.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.fd8360b4.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.fd8360b4.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TEQRJG77OYrijcdqnxz2Fk+YOch0g2aRa39oiXEfZygiYUB9C2pfc7wr5113zZICrPd2iLx0js9HRr0hXTwa7A==","shasum":"411d23a61bd861eb4076e736fb7e5b590663a2c5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.fd8360b4.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1imyCRA9TVsSAnZWagAAI2wP/iRaGXuojM0Xx9VDj1s7\n4coEFD+l2AHk6NBt44SUOW+Yy811EZk6ffcjBitLadcbTnV8J34ii/kVGymq\n2S3hITuQ5e4zozmhvY96VoGHKiwMVDASI83FdXPp6L3PhgYS5oTyqEbVFKx4\nF9Fq0szlA75xznmA66pGdXUmW/+iWZKWwZEuLFn5+rBVWMaKukBzYeAmgz5L\n4C5gQd70K2e4jqRJPikycK/6MpOHC0vetCDWSTCS85CvnuFTX2o9/PUxjFvQ\n9ahFE1gBe4DdwPVTcVTVVixh2Ab+ahe/pjmEIjRoMXcPz50n2AE/z9pFZp7o\npFf1hdX3y/TqYf538N6EI0u+xlZpJyeA1+VZrN6a6AkMVpH39vFl0CmE1vCd\nPRDKBxKc3YgENqXHGjUDwlZON21D7Gz5Wo8DRbT+XMHm4seNsdQmpcuJ4uDZ\nvuEUHnrs59zUwhgBAnpNN0mQW2NBOYr3V1whidrdURXc0IPxAC+E3G79D0Au\nJRuPaABJ9bEHTQPjAj0FlPToJBnAVy6B500PUbvY9L/T8mVtPqG9Fe6qI2ER\nTTqTFGJCfTbLCjXC6NJxg56pVIMQ6jDYwkc8lGHaTGMccfBgr6Ias+MOvm5e\nwD9OCbp60VKx/QbGDzQQI9QJlCJmkbgWcYfgTTkkvZ8QJsyNfAWXq3L88UFJ\no/c5\r\n=4SYU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQu8Y71ryToiO9SbaC47ORgIp+HvhmyIvCwi18BveVDgIgFXmOdWEfA9dX9ku8zsKaqbFnBeWL4Dt4OhBM0j+ipZo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.fd8360b4.0_1624648114519_0.7157877781569708"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f74432f.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.6f74432f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.6f74432f.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RmzvOYme5gZQOINlMGtgNVske5+F9zY9czZyWZ+6o+G7g2u/ct2iRI+bjR6CcbF7nxIWpKZvzVZg8x9RlhLD2A==","shasum":"da83e0824de8437aa01cc7b10f12fea67d7972a5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.6f74432f.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kCkCRA9TVsSAnZWagAAz7AQAJhqq6r8ud4fO/YplMpp\nLeaB18inE6s3liAcLxzZQ47QYjzWSPAUodTyBPWRKrMA7rmca5WSeTcayGr4\noc1wNvZeDyfk3p2b0x3XM2qFLNBTZQHDOE7q7LSipcFnAhnO4Ms+ofz4S/vO\nk76QgqldTppG1r6VGHx9fB6cMTSNFTYqdWcSS5x/jKtauN4YRcb4IeduZISI\n2JWgh5J14l8h396gntIGoCS6yl5hkmHpEdr3jYKkEV/ui6Qj7+KUMmKSEx8s\ndwJsGOALPIs1oRMjDBiBkbjMQscsR+0hd2z0TQXBZOGERMq8i0WZOU0VYdYc\nA0PxAREqjujIDocgXwl0VsHTMp8y56ph2xS44WO9L76cPKs16rVenONhay8k\nOFTPI1CSe0H9uuj6wwN/ZBJadjzBRjq2KVE5xG3+guwALX8CBWKNw5F/v0Ew\nBi6wUBA19thhYutyP5WIGpc+J695m/ywLc5mKqtSB6sCSzSzScRgLGvLUkHj\nW6PREbu1PJOcLUoo9LE445BU8vws5MOl0rkl/sYW2N9AvuT2pRuezKtLjbyV\nqp0HKZVkhDUmOZ4k+hbQybkaV+8IpSfX9m4ip4X22BFTjwEmnhBlZqXYwJXI\n7VteOzR0XCRUpdEoswUnqMu70drJ+azA+i2qrJas8jLNwXs8vXhN84nc/rYk\nQD4m\r\n=ggJs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDahzb4jbe0Rl34fA0BMFtaQbaQYKBCOcp2O6A2gaWAIAiBr8UBet8WZR8ooaqejzHgTyjmlE8t3xzp3MpNfYc5yiA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.6f74432f.0_1624653987969_0.39249089633951195"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b62f901d.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.b62f901d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.b62f901d.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Xrk3eqy0YLPTp336Sjnyjj/DW7n1H4J79cC6K2y0p+zgwke9qyfYTY2Cu4CEN787LXI2NZEWncymtCwZnorTIQ==","shasum":"dd765c03ebb78a91a227b450c626a4cb345ebde9","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.b62f901d.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lXOCRA9TVsSAnZWagAAIVoQAIL1VOoIfoA6P9hKw4XK\nOYujwGIzxe2vPjdgi/FcsY/sUNDtesZLZWA/+gy+8C+93zYFahieYGQK1y28\nRGzrX14lwfgVkV6FysKxV9Vrp+VltUS34EElnvTYdhsj49Fxmk11hNukJiLf\nMFq9m3RYCkr3V2B/8G3C0p48tt73OQIYAjCQzarFmlGLeUpoQ3npDdyNWy6t\n8mqd0UKSqlR3SZXJzlCiRtoZ6KXXxZZ7A3FJ3fX94fKXwfLFucHN1qCMs2sm\neVzh8C5dvegBh3nXKBC3D/TdGFySSRgh46G1a+/Zl0yHaCT3QS0cvH7lj17I\nfcujvl4s8KG3mZBlEFqszQyJdiu3zeoV8J8CXCjLDsoqpu0asiDW5dQcGa1i\nGgNIqHCr/GleK/Y+YqqzrDfl8EX0HUinOKgK5JJJk6SUfPHqbUR7l31TFbol\nlDxKW6TN04iYNOPk0MSDYN73k05aMohQPNKHcPyXA9gB9tZQIagJHbU0gvei\nYFiNVcWZs4iOZjdc1fRePnZxiHdBcsUn4DrIRjMyJLZlQ2m2BMhxlG8nf8rb\nlQNUIAK2Gw/ZYXUa9B2QdMbmcI8dA1D+59EJeSvcLM7tF/J0H/3L6epzG/GD\nJovQigLZ/Aq4EpKxhklxE3fDpsQJjnemavCF0U6yMzaqlBAeJw9A0p9I3yJC\nJ/yr\r\n=Gess\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPsaSrKBZ2dCLXX3RhIUgAdPmQOBgOTHlKYvhxjDV7nAIgWEQ2F9enrjqIlPcXU1fVaOUC/sEoGVBVRsMEE+FTd5M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.b62f901d.0_1624659406054_0.3868928523013191"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.73122cba.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.73122cba.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.73122cba.0","blocking-elements":"^0.1.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pzUdbM0isPl05OZOERgKWyb28F9JOTgaET0afHT20xEr0F1X8DKeDG1oWAUJQVZvMYCFGIIEaDkZj7VdBabiWg==","shasum":"a38444c2771f9c805aeed99b59e7d915d0ee0904","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.73122cba.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3MemCRA9TVsSAnZWagAAo3EP/3onrOdJ7UN70XoEcEMt\n+OhTd7bzzj4DemlfrHBZBPsH+cZhPJiOAjERs1yEj8iqtwMEpKZ8PgTtdodY\nWfsywpdu3385FY8/DQ246JybjdI7wTGNWgSA33Kq/C44hIAuv1gZbIgl89qY\naaJ3firJJ+DsVibYrVYIm5yhH3rLqgU4J+v9mqFcBIkCL1juObX5NPTCn7hd\nG3vZHAGCzuiYCa62tu9GIuu+erWf6hQhJGNuAxq5gvQ5o+IKkVDkdL2hmybJ\n61fNPNtym1owaSh9aOoIiBRHXIIgCJnai5NIhDS9uOhIG8HrLbfW1v1h06rf\nx1/uHzbHA9bXXFevDEKqev9+StUnbmUk6i8HeUvsBIUrDaQL+c3A64826Y0l\nug2FFSsvlJh+vZt5eZrrp/pYqBhN365Whyrv8EK0ev6MFIrt57AQcNjUs0+H\nu1fr9MTDkxC17EL0PnnpwFhzKX4ltWbJwZ0iPwx33yWsbOAasB2+u44fTBLJ\nR9/1G9GLWlpRaxEEJ5nJNp2Y4eGNk9hKyN2ZxvV2iK/pPFZqPAoEPvIEaCda\n4LapcgzYoPcvC6lFHuslRVY4J8DVVCaC5uX4eFiy7XuXLnCy9+Ou5zSZ0iNV\nnXV28IcJl7SAC9txMW3mtCEt52SqydpD4bnJZGXvOHuLlNp4RQe/47LtMQGI\nd+jc\r\n=gPRB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrSq2aa8qTYNPVH2IfGzo6aZ24vZpIWfwsp6ByRUJHpQIhAKph80z20agwEQaflYop7UaNhEl7u+3Wlr+SMX8Nbn5a"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.73122cba.0_1625081766079_0.09203893559147214"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a6912af5.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.a6912af5.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.a6912af5.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-F4aNbk3bNYNOXH1heOtC3gFCiZxKyQLom260Ls/d4BGXbCMpBnR9eHHjSMjWAUIYURcMzWv6/+P6PvJhUso/gQ==","shasum":"0eb4b3526737492ece8fd32214e8fbf7e49e2f71","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.a6912af5.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jSsCRA9TVsSAnZWagAAh64P/0Wts/65qrz9tmemC6Tc\npz7a35v29+1v4zDveFGNLgd4xIJY/XN6+Kamg6DSC3ImqO2O6ricPFegIDgx\nal8LxwL3wZDNWA6y8Gc/OBtWLK7IEX0JoVdFeroXyHW62iwDL4h7AftPF5Ct\nfhUnfq1SmebltO39qy51z2ru5yheX6CgoBEDyDxYqhFqyBoUqqu7VrYftGQz\n9ZDkRUQBTP9DTHuK1v7Gixmt82j2fQmt3lr2lSGQ/cgc38aMTRe+5G9l471Y\nFUhnkRsaK//Tj56mdMdimydyi0JW4zLIyC5527FsijuVLI3rPR6KjwUxjVPe\nJvY4JVmRod84242mC3CVy+w9L3xJrWdXozLvEcIGVWOBNAfCkZWxn/LtkmoK\nJDt2x2Mv9sA83M9LsNOjNqmACTWv7PPwphYyIG3vbXXyBJrRAQzPzHk7Ahnq\nJK3joKc5sa+fq5R0JYEWUxRZgrLeuXRHCFzDPaV76QdYFpJlXDF0MB5z2dlf\nW8GaMNWNq0O5c3yS/U104xVo6TG2/bZIFhDN1jp4Wi4NtqUdRZXqCHnBZfCM\nCZK6FUpvbBdjEJ+7Y1O1ybZRXoZWSepVau1emqgqmdGLyTDqVrEdHjK0l2Zr\nlnvPTHYl+stqa8mLQz9xaJrw9PcBD9E2doZ6XRv4DUjvKrnaHeeXjb2Uvm+o\nJw+i\r\n=zxAA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBG08yhP63p84cDLHOUfGXmYs6Qm+RuZkiOordaXInVMAiEAqPMrF5sgfkzx0bPcgvRoAU2kc0iGyponwmMTMvjDMkg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.a6912af5.0_1625175211946_0.3153590381428466"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.134f24bf.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.134f24bf.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.134f24bf.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-llNwQWNteOwbw6O7MWiywiI5e8gEdMYBvyLAliLUiO1dOUlszCmmpd6ogy7u4nGRVdwscO9SQUq02fPS7/QFMQ==","shasum":"0a397452e0cdb0cde4bf886ae869bfa1ae85c81c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.134f24bf.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kJPCRA9TVsSAnZWagAA4MsP/3rRqoJOU5j6ZLNiELae\nIaSDRmnleJ+DumsdK8jUJ67LaHD8VE+gaI26zcKXckHY+bqc3kBiPzbZntOW\nga6EBSvm3k7j419AUE/bCFVzdHbScO3XNodCzumcB/94kfKdwy65bfrrowfY\nOutDTZWRo4aB6ahHUV1Tsb3sNVRSdb2LnIMUB3NouqQtYiTl/nKOFo6Kv8jm\nLUsx2n1NgyCgrdNmlFOVoTJdmyUPviQQPSuNLvAUaTNLEdZbLAtiIszRPNKs\ny+yBsOvFosukY88fGfrpWVQDWHaAtuIhgNgXEN4W9tRysCPF8n1TBEzOM2UF\n2V2kusSZiMB9AdjEY+13wMVqag/K4EGVwq1cigXgLj5CyQYjvehVJJqIF6yg\nuSO1ZhxWaVdFs7bQBysUkkr1aooT2KjRJDVJubsOiV33+GfeZSYGWt3gdibw\ne0pGzSeA8zUQxlV3FUrvTuH1kQq+GP8CmHDxYzDVVQfYqRezZ8ALAe9nFUpV\nJCOJxpwJ9SXzRsl1+aMmlBeRP7oBTwS15IZ917i4hUPZcB4bWpBgnZI/2ssL\nteyo/kwpCfTn4a5Lh3/XIePtiVAnUQzn85LWfJQQbV/u7bB4t35JZfaldFFd\nWALbzQoxeXz2iTEUVVi8fO2Mpv4aY2Z/szmtFNeelOjmaJoS5+VhQ2Pci1bt\nhMIq\r\n=KU3K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqYtsOKwOJUIwiJTMVctBNOJahU084ZOiIeywprgnj5AIgNPrzRuImg7HfJaVnpVgN6/9NAo49NbIqksUGlt4QB00="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.134f24bf.0_1625178702341_0.7488683610698581"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1debb78f.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.1debb78f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.1debb78f.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5pK+en5in0mcVKgzSeKdr47tsjileqvHMGa4qCiqG2VpjDWf/eiajUoLZC727FYhGSdb7/tMeATirWipwK3qtg==","shasum":"1f1d793d54e8cdd4cafb4b5218d279033ed1b5eb","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.1debb78f.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5Pk5CRA9TVsSAnZWagAAB9QQAIXeGjqQWsFXvuYvmzB6\nyJHtKYfcToQpA0O6bNSWgUn2tqWKgTZJjDNF2OMN4inF6NBC/mkjgJZE1LoO\nKoAeeVn5jhtc9mB6Smabfcv0A4ZNZksdBmc+GNXpiyFzd0YlRKMlCEPJXNAY\nn5W0eOjmR+qrjCsO7UDL2HDe5XI97ap3EFR8e+OVOaQeZvy6Zu/laLIg/pU5\nX9JZ3K9S4JE8dCoW+DL2jJHRbCf4d0dxy93C1No5ixI4X19SIPCaFHPIYV1A\no4Xw9Dvhaq6gVCLtRxa0PXePKNkvjCcQGd+3MdqPxJMYZ+yu6wO6WXKcwyTq\nTDsieXDOn9pNlugWnZK5b3rBsEj3AqjnDKcfYUsuqHjPnYtN10k0+trPxbif\n2f88bZMDtBV5nD9QVCpG+rqz520aNNalMWUITcHlyxwXUFRrltXHoME7Lpud\nvA8bGEHRsAr/WX8ktNAF8mphBVnY3pSZQ1nG3EiXQk20Op3brlBMuUki8NYD\npF+QZiDq7nyFrlC5LGlCAEt/6b/pHEF1q56xX8APakstAg1l6PtoE1rYBBot\nvo4DXph9MjGsG9/6GqLhVnJOTtS/o5OPxxXrWesLyYyamujb14qxk7fQrP/7\nQET2w/h56zOe/jGpUfk9QBwoGzNhlqMkBdvcAV947nFqY7HG8NSAJ2bp1QQR\nmQtt\r\n=C4Yb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnaFmCc9Zhb+pSfJErPaHZHU+8okLCkVpl2jf7YlWagAIgLvzGB/ExpWcCBUP0o59BPCdixAlOKMjCN/VTxdCL2rc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.1debb78f.0_1625618745326_0.6087157359969979"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d53edeb6.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.d53edeb6.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.d53edeb6.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pOP3s1rffV6CRdBL5b4olVoQ7bOSweKgl2H0yfFo3dCuyynen33w0ml/j2zyScm2pLkYsXEVHVk9SRlwbROlTQ==","shasum":"fafa13810e44f34c252643f5e36b422a7456c98a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.d53edeb6.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d18CRA9TVsSAnZWagAAbdgP/2GBSFhv2KichXq/2APy\n7kjEqUeIqJnZqdOqwTlKChtDOvwUyRMP+ywufcwWvB6SHdLY7AZjF1ELhi+V\nc+BAnkVRc0/LwCD91AO04b4ZgX3eRWaX/DZLLbosyqtqyOhsHcOn4FnsJpvy\nLBv7pRfmKnZdAqWWHuueyHjw5IYo/svKIHEMlyGcAGu1XpsrGojc5KQKycZ3\niOjh2SE2Jx51LU+MHh3vk+2FVQCCi/DfBNGISf2pFFRJxs7rdNnYLXWzk5ry\nc7fFFnHp3tSf9HhewtGSfJ21nFjGO4l1VOvmsCJcPKNFvMJWoOT9OwnQEMXG\n1AEtf3p19YaG6ez+5MRdUoHJUaSDaOLzUQIGSlu7CuwcvBzKCMMWFA5KOqIU\ni+7elu3teD0LcM+QF/5XhX1xDcOpOhdrV+2bm606x7ILNmLmEs5uvcmVffuI\nLPrj0gjnp047IBi4pVMHr2zXXe6Qm+PpSDL30dcrgoimWlHAdHXUXn0U3X2X\nq4Iyp/0APGOg2cDJkOa57UbhtdoJMz7GrkjLcmpAtVtRrTtTn/gJKO3/bypg\nYmYSpONOICyNJ65u/B+Bt8i20SvUvwaYUJLb5B/pc6gdET6jP3JgJELKAOVs\nKa/h9kNEzD60iY/Q2XQPoAxPmEWk9u+6dUWxkbi5XPYpjILGoZXTVvJDYZAV\n33+q\r\n=SL4q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC7TNRVlqyisDtekYbVyRZ4/GIJ5psX9RaByKvWfddjoAiEAz0tP50oVBV8necAM6MAGIwk1g5j6kwRGDlznrCcQyuU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.d53edeb6.0_1625677180491_0.8515524120209934"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2226489a.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.2226489a.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.2226489a.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-g/6IyYTC6b8t+EUMYgvJONgc9ybuwlGYYnCk3xr8kDKjUy+btr9RD9M0tVO4jBsTe5W28wcpmxo3VcMR/o42mQ==","shasum":"8013c1c9834c70920f8c1f0a46a2678781332f57","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.2226489a.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z1cCRA9TVsSAnZWagAAjyEQAKT+yWTdq3e/LnAcSihc\nJjXUmCY77KsGOrYFloR66fq0soD+uk8IVY+D+VyNEX5zGE118U7mrOYK/hjB\n9SWHApPOGrueTp2Vg4vtgupVIcCKrod0vWymtxDkqCGNuhh8Thrux9KU5GKW\n3N1wGuwEy83Ow8EXOFii8CFa124E+4U5MCLfsTq0Q0fektHNuXYYV18vS01b\ndBSlBVupyHqJxEOyaA5lptnqYgmtz4wYHRZfg0v3vbGoTDphgH3HlIsTTMP9\n5kdVS3xsuUyEAm//tOm2AT0rpWL2hLHE+4t2qCxLsqQmdbkP/Faah9EgJFOD\nSazbrGuNva1qH8EAwKSX9X3udRyJywLML5Qka2G5gBuIvR66Tb2KpXvqlMo0\nCNUjpKeFlxx3OmJkBl7yjDQFqwO/3ab7AMoIZAZOQ+/OXYSXAiUuWOkk09hN\nItkmT+lOTZMXEbyD2pOKLByq6cn0dgZBDn4zXpCd13vOBD1AOnG9CfHfcSIj\nU8v1Rw6Gx5VG9i0o/pDljY+KVZqtCn1qD+FAGv/bHAcAS6E0MLOyZ8MmLT4S\nuZOIf6Y4cGWe87kNvGyJEVyevdC5GIKK/iMfH2EpbugTr3CnuRgz61L12uqa\nEBBEAPAWUwlcn9svVAyLM/FLBb339gBSxUy2Or10eCq5TZzBQnJeoomGkM4a\n6k9c\r\n=i20b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA4OJ2X+0piV8f1XJr9GOL9MUuxdd7BNrqH3MDc218EbAiBaNvJfZnJKUMG8id3RgZHxLRxRu2/7fuaJdaZTOtkxWw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.2226489a.0_1625767259819_0.5395725356943035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d4801c11.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.d4801c11.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.adeac0549.0","@material/mwc-base":"0.22.0-canary.d4801c11.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.adeac0549.0"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xd3Dy7e0xSKCiBvPfnt4vyfVowqWZ9D4qeSIuksVGcbYmx6x1xxYswwCJVWyYx2Z+cDcPOkinywyiKIRTdDIeg==","shasum":"5af7996f1c7f8d5abedd989ad6a2b1b8a14f0b27","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.d4801c11.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51nGCRA9TVsSAnZWagAAxLYP/jKgWQJ6Tlc8EouBlpqS\nVJFTLWO0ZjQqu1MBV85mRtp/zFvvx8FhGAzi/jsP785HKjd+UjK0VXwyZKId\ns/hLY9H2+m1Zfi+ZGUdWYBHWqlxWRz8vC/LfjOq1khmc2K8ln6KzdUh1IwMs\ngehzOagO3H2IXWYXJwcMradjlruUWRjOWYhEPyPnaJArreVKAYwb7dNZOATv\nEPiJduu2ReO/VIGcjex+3iCLz6DkKJg2/D6ajR+V7ilqAKgz8shE3hS4ZjDa\n4FKFxKOd4j8frCRp9/dx96KmTjS1vA2E4da0mqQK3x7njgQfhTZJ8hOf9p4L\nTBcIAmK707H8qb8H9ImYs98StxgYV2zxpnnH0VLWZ4S5mrmcwhKardBBYpNu\nBWrWk/SaxbxZvrNn4f/MaGu5XS2ZRv062GhCy11Ro95S+zsS6sjkcZvwJaKX\n/IjePUDghb/TNsqEUu0apZrT1L1h+EszNow0fc6cs4WzOJA9vHPNpd+H4AFh\n0w60G+LycAcGVQbZFBL9SezbyqEsGopuRYt8P8+qyZ1RKKwGZ7GrfL3GGmTe\nre3WHRAo4zsKrd+LtN3Oo42zuoVNLA3AjY5Fjtr8NODexAV9SWd7ehTJ+/zY\nVm4kBMtOqUm726GTCnVk4AVEwC/ai8RYJWEBGaSXdrJNKANt3l3doycuZEe4\naFV3\r\n=l9Jg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICbtadnIkN1w6tqtOU4S5r0HfuJU8H3KYIatu7wWy6FnAiBQzOUPVE7x7AvyeWWm5qL+dk7kq+Uo2S89ifUnNgsG9Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.d4801c11.0_1625774534583_0.8733479632194718"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7ec5f2d6.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.7ec5f2d6.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.068fd5028.0","@material/mwc-base":"0.22.0-canary.7ec5f2d6.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.068fd5028.0"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DeGjYlXyzAwHZpoNcRgor/7ZNOD3cpMqISluUmFYgqL7hqd88XdhE5RIH10MI9FtpyyOIm9GxMJYvbAoj7W9PQ==","shasum":"eadacd18e3ddcd4c53feadcc4633fef5effea750","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7HjgCRA9TVsSAnZWagAADPAP/3X2aw9Mv8RnTr1zoMbo\n6TVFPve6jpJATdOMSnQ03oOQw6uDLcTr/ifJ+uTxrQDSe3wvONH2kdjZnnBL\nzNni2iTCvE1eXelDHxhlxKaAVmKKYshLt9WbFE/E65AjiC70Kz+Z5bdqIFTw\n39WczI716S3daKS1H44RYwc71A15d7pEn7Speski4IUMcjGaJzDTVk/QOAN7\nulUIhQqRmG5cxywxwX3BgQLx4n0xM2+DAvGnKPiq3w8Y79R/8Okd2rlHkDF9\nwWwm14Z8GBQbhwHAa01Oxw5VA6VborQtECJn9JvhCGYJikzA9OjQuDeMKIoa\nJzz+pEoF/qly2nf26B73VV8wy/BQJZEqS+4ATms7PUxU2MZn6EjkPdoft+1t\nKW4L7HVIpRLuQAl9rQwY7Wq7cesTe6GUo1VY/8f1BAT81rEOSF8INtVJqtAZ\n485cRMcMX/sVE4VVeKKCk02dehmiAweuLOal0/knLISGzFpMQbLgo3U5NP67\nD31lzSjRFlMyOoN2luf0/ptr3N8TiJzlaVuhOOBDMFWXrOP1NkF6OWmwqFCQ\nPt8BrXsysN1kzIxPWkWcKPoZ/s8EQP//VRjwn7VBoENjokRTqz7SunYs3dml\nA+sdUW5mxTGGLy9wlrp6JnNqcvaB3xzTusPjytsWN9Q0wpoGo+mp3cTZG6vF\nGghy\r\n=mwF1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZ2+Dp3DJjOynEd9W52cbzy7gsRXUn3kjaGwl6u+7DIAIhAKVdslD2e5xIBZSGrdjRkcnl7YWNzceuDBsFovFwF8fi"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.7ec5f2d6.0_1626110176469_0.4852740806733322"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.86cb4ca7.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.86cb4ca7.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.068fd5028.0","@material/mwc-base":"0.22.0-canary.86cb4ca7.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.068fd5028.0"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aBjoUI6K5qdKjVL4upfvHhkvYhHdGxsMMYnkSqLP0pCd+fVK3Pn0pr8JiOiH5T0hH5rEiSa1lI6uv1MPGdP0lg==","shasum":"b64af68bdec8db71a347c19216623d13763d7100","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.86cb4ca7.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c89CRA9TVsSAnZWagAApnUP/AnctlNMQNA25tsCVGWL\n8v33G8kSF05rmcVDlyqAhkrv0eo++cfX+WjTJrDg+TYgRiBrRfPBJczZNfVI\nk69Xw6iSenJiMggh1nmBAKT4U0Npr44qM2usmOeSDcgPtq9HaZ6L27aj9RZ4\nrlUnFO64NzwDwfPGfVUPKjIdgscWx+XJXWHJMubsNDigJqv9EVMmsPqVBcCi\nLuKXvCS2ARMNDSwppEBCrJ2QaYgNfNIeCGvvj3bX6Nihe5QXMy+LB6q1nFkY\nv7i+JqJyTpKXgjFeapwSbXi3kidwKQgkmKZ0JZkXeG1hHlV3aN9jxXZhdKfG\n21OEhMCG7kGtL+wLGTJgCsmS6wH+pvwfG/IXucjCtogB0TUBmX/VdqWXyvmx\ncEjKoMPjWVoFQkN0nAcLZgCW1JRUe3/NihFLsoZ6K+rcoQgLCYEhO/9U5349\nvcY2QKpOMI5+H//GH4EIgch+9+MyRcRJPxlLHJnaaMNBdqy3GvI/4ejWI+nd\nRAsyT8xbvzCuzFXtMdmgGo3oNW0hi2SGrgZUAEIXihkZMRnDSWS+cw7gWfL4\nECOUP0tjxoCnQN66696t6gvKaTlc3Fj/rTpiwRxxHsehDvgucRKv2qESDCKU\nmtlT9Gchq8GybctkkcAdl+eqcVWm9cSVdXWt/R4b8UqSK2cFJlSQwDKPMCWC\n1sL8\r\n=EDxI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICDt2vfz+XtlXWewbtUcGoJalDRl9TzS6EkNhSrbbOdkAiEAqTR/PlLmO/8d3zSIOrGjvdWILv2g/PcTlS5uu4rm4Sk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.86cb4ca7.0_1626197821151_0.9539345955621028"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cb42f5bd.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.cb42f5bd.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.ea77795b1.0","@material/mwc-base":"0.22.0-canary.cb42f5bd.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.ea77795b1.0"},"publishConfig":{"access":"public"},"gitHead":"2a31bbf40274b11678aacc5de800344a83518f3c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.cb42f5bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ue6O17qDlDsdFTbMEz3Vbpfh71a7B2cqzrUjLDyEB7PS+AxakvSY8pHe+3NS5ZTDkW/gs+9RFE5H/oM5wbkkNQ==","shasum":"00042f3d2b4f3a682cb118b5215c90ead840932f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.cb42f5bd.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dkqCRA9TVsSAnZWagAAsA0P/1wk5u0BZwCB2wU8rIkz\n6XVgMeZBolAyNpolD0W28/iXq/bHstFksHkkaxN5TZcNOk/c2eL/2sbt+YWv\nqOiSJ+rWGvb+ZOaBYHKl8nevO5qdXs3riaabBVxLWTTxTR32cnRO6if12P73\nSPifmDwlTXTgWSfXsLMm1QMlniFQ45W0ZEB7XmKpcQ8mdQN2SUqQni9/GfMQ\nd65klWuy+QX8NgYEiy5YZqO5KJgaUqL8E6y4wuMREX3nOUeqh33O0E64by0N\n4lDsuE9o8UQLn18VBsyQBJYmxc8P3IpVeGX5QO+RieBdG3O18szQfuIrgW3L\n8PnTmA8FusXJd5UCSYRQZzNXRv0mUb+0QyqoTUrqdBcAolgd82uoXkMBjesu\naKaUzOeV8cad8yi7B7lc2Jnkkb3HhU5jN+7dPui7IRhqjSM1cWa+T2pPTMNZ\nMTQ5JWpAu8mVbJHFCwVGyr0EgM3QAQGwGq57f4dP9569kssMGNuhSwLiou4L\nNXp3vdVqj8g0zclF7qO257kL0FJ3PdGzlAhFqsr3MgbbzClvSdPjWc/RjkfZ\ndc6fR3nw0rrnBf0cc98jHgVIlYL+barXwNTNa26taX+wl0eA+vdBiWLt+JET\nlYiPKm84mRFHJSkfJo9WLNSVkvqqlIlEFDnLwR3A3Q1HW5uKHXiG+PQUie3L\nvwiX\r\n=Y7G+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKZ2weB5KEuWFW+1vpjTV+HA3oR2Otkj5AKF7Wn0AxNgIgF+1s9QZwQvpQIUKnIE7yu0u0BDHQp3E0oIaTr3emevo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.cb42f5bd.0_1626200361713_0.700477369055176"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.bc9a724e.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.bc9a724e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.ea77795b1.0","@material/mwc-base":"0.22.0-canary.bc9a724e.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.ea77795b1.0"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CII+9nmcfUaWkcrOYWJTkQTAMuV1t4AF3/MtQKGSe2T/Az8Ym6JnYmlKGBmkTZRrOzblbWLWBIuXLoqp40nBPw==","shasum":"0ac5fd09d461b78361c285441f212f8c653aa46a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.bc9a724e.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d5fCRA9TVsSAnZWagAABZsP/jNQ7/qWrDLKs3gazpNt\nGShtFWXxDGgv5piiETGC1zgrm49WFs3jNRLZiUPFsRdeh4oXW6bkXLWl0o+s\nwyWGk9u9ht1X0Lj4spl4Udgya6ovOXu7PbAOc1pzPeUfEYDeVYuVNotocRae\nszMkehqxPybBBfcpbpQUbvmQl7b8zhQDekpnB8+PXXQ342T5+C1UVVI0Umbe\nXmSRmQWfmQpebSVe9D8QbOcaUA/Sbe6Th6WRxNK1U2XHG/ISzfE/rnasrITo\ntS4CeBWgYqkuaK2V9guqN2HGzYwOhSA1N91a97sPrMEDdQzD9wzidk0tEylN\ndzDKoZnn1a8xMSnqm4Dl/xg+nqFXWb3RNIPu9VF/H2qeUZiPhvGpBWvdqeSk\ns13pdgneLE9NorElrD+ACvJIXcvBk7gJpxUT+lHlfpKhzLQEeLWd5f+AFfRu\nuRql9NwiavTcCUybnIVOzejNB5z+z7RM6ZgCMtXY8sKaULoOUoXC2U1p4g8g\npE++2hReA/jtQpaGDoVstYEl7+lSjmSs9atopvv93trQQQ8OQzh1vRSw2LVx\njl2uTNyfki8CitdLT8L5g/2R7vU0dm7rj+0YPg/GsuMOstWtLK54JgNtdIdg\nuBQcsFz0hLUbY8S9RUZvAUB9fmTSH2mC+Tq0dzSeKY3j6F2sN5JZ6Ewz3RYk\njX+S\r\n=ZynM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICa1kcJHP9w2owUT9qCEEZLR9AU46qXXa8e2eYeFZFb2AiAqr5jMqxqJnYzdZcYMuncVZv+N5Jiwnw69+u7Ok8PQ8A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.bc9a724e.0_1626201695132_0.9567064657129796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7847b83a.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.7847b83a.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.22.0-canary.7847b83a.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IhAxPhDuuIJL4TEf8TfQ5p6Rplxw0GHlU59Z34vg98jXdZoJ7P97iwjCerzzlP3A50N3UVT2d8MLLq+91dDsDw==","shasum":"99e762ef709d0333e2646f63dbe86379689d5961","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.7847b83a.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xxRCRA9TVsSAnZWagAADFgQAJNK3NCyYxawaMJFTCZi\nOKV3rAi1kzQrq0G8/+TsS1pbHf6rigb2VmFRkm2xvKSpcT22cLsLy3eqEhke\n5J4o/NWp31GmCaPlUc3gg/UwOJ0hubWZo1dl1rmjwrY5v4nL/wQuwBr1p3RZ\ngQ0wp2WS6pMR2vK1L9NiDjngL0YN1gQjHzey9YNYcZTB7RKRb+GacP/ZvOVh\n6/+yxgpT2sdYvnAgNdYQ2TKxDUN11OnokiyP2qMZI3ByanuniPL1A0sXvXp+\n2pGFucoYgtoGN+XrRHZOVXkGQKlBee5eSH0EFf9aFnOWo/16xz6fXotzmlSv\n5mLcTMuuZV+PGPyuzdbEnAk1Te3UjO6Me9XPkvHeZs37a8ViuBp03QY3hp6p\npUk8AG5N99GECJOZtFCeAwatw0A3yQD4rdA8LZWW9hYJ9yehG5n6KnTNdcBs\nz3+FlK0GOPT9PDgZ6FYqBiewAoIgXPaeEEyDnMZinwpK/t+yb0UGxoXy3BSb\nZVRiZv+fyHY85pVw+ax/mcYGTTbOpoQ53mmkiGVrTB9qY5gMN5V2Bz+H7lTT\n7TzUtG377sMOEwYEdvdCeA1stvq1VUlT8JxElqyhSRDfpJe1o32dpKe3lFbv\nA37lSIUwc0SxamCQQu70NvHVGzD2WWb1AjxyPHQcIsOg+EYbsT56WCSCVDlB\nxadf\r\n=7haL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoCKysEHoPQRg/bABk1nJjO/xraFDiiWHVnabZmMsTBAIgSgm03KaFf4q23ax2vjX72Z3H2HSmGGj4D7d5La0t/3U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.7847b83a.0_1626283089172_0.5273286985625214"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8cba18fa.0":{"name":"@material/mwc-drawer","version":"0.22.0-canary.8cba18fa.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.22.0-canary.8cba18fa.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AVbeO+1IpUmKls7lwIjlC7i8DWEbGIA7/TVOr5WJVpMGdXOcd3AXkE1ed01JXNsPoin2hH93PkOhr+zAlXrSKQ==","shasum":"9ec3b90309dbd52dbe6af064a7d815e47f88ebd7","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0-canary.8cba18fa.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70hdCRA9TVsSAnZWagAAY80P/2Gi4FNXkzxtUtMsCoNB\nLxhtn+C32o5siO2knAgkpZvFF+0JE8jmdleNlQg8ukDw05+YSzyC9bIub0ZR\nLxIy0R9NWBOXoNBDHaRlNWsKxF5pgQ2OUGsugs4zOqCNnYR0RB0mC2XBPGcH\nptp7P1vl/I7etSzAm+u7DYOup6CwXYInNRXRS0sHVGsC70qMzmw8MfDf34Sx\nK8yoYnPmjinrhoiulB5hvNxdONz9evPYqueuhlMDfM1x0m39iSxOu9zWh2/6\nBns3sBNPa10A1RihWMf/5IcsJCBpVEXarDkzUlVOeaKv8AGJd6XFirlswcFP\ncMpWBVQllQUSlKGP8PCnPe1EUSU8IQlYjh7JyxztBWvqrrgQj+4Ec2tP4zvX\nOun5CBpJXOynsyFOsn1T6/cDkNjJVx93dIvuhtstxEwwpmd9aNcgUxeG1jfT\nX1rM8Q+YzABdWnFFUGmRpl5bj6ncV0iulGt6Jle93Sgdk6uqZrngbZoR17EC\nW9QBaeApJTCjh9H+88fJOgVBi7xVtIaKHtuevM1QJbq4OA0nHdb7KcNm4eXU\n/k54lawWjCUhfhJPvCe2z9PGnB8Dq5ELiUYlELwtx/4tHUNI9DpafCAi+4RS\nL0Ta6QWB65jwFEXK7ryr8IzFT89o+7Go/B/XXII1rxFrG3f/QQeKs+Oi68ed\n8IDV\r\n=cxPu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwkk6Agz6WA4qISgdWA9y/Yr6+XyKNy36EqW8qWxtG5gIgW++dNoctSZ4jDz+P1FIaCSFJvDdorKCh89pQ0qQnXKo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.22.0-canary.8cba18fa.0_1626294365279_0.4922794768787375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0":{"name":"@material/mwc-drawer","version":"0.22.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"^0.22.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"cacad1c9793ed32c30b99eb73991eb6c1218048d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.22.0","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-I7s9xxJtEwjh77etKTa7pNa3GJFERz2Y2Mst4hqyVP3dCpIE8t8B49/TS5AhjGO7hUpAX65bqSffa/BTRfPs7Q==","shasum":"f1c132e8c7a95a1ee69219460eb9f6f4ff5620dc","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.0.tgz","fileCount":13,"unpackedSize":53738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72XaCRA9TVsSAnZWagAAkxAP/2KNUGv6fG7zgfo2UXZD\nU5mDLwB6xZwv1r6tEsbocxaA7622Q3YRhiOOCx9UDggwy3PLYKDQAnEIg+Qp\ncMImaTaZS8IFoK1liKutS2bfdEmJWHaA8JvnAiyYxIhngq4P931cCfBKx4Q2\nK99b4T4qtWT5mlSYiV3Rb/55HM4vRaHuFNMskgrwPcwol+6TXqVpmh9bWPPj\nCanyhrt3LlRAN7XQjmCOGCMr636kvZH6l4jbcCFsh/bXeDyHrGhBanfdfR97\ns9zq/qgtcMLg4TgTsWhlmMbJdpGZLFxYaqmXmQTjqPdlap85CdTFJv5xBBev\nsNLeTu/m9azUTfiuCo3H6JbjDDPYa4DkbbczF5+YygVHoxfMEOV0/r5RhQjh\nCOEsekgOWjzSaW0OO9omrYYGmYTD1749h5J0ayXAAoRCSKtZddXqtMG+QZhj\nR2p6pt3uUZjngaiirPozyCs0XV1+X4N+bAmnKJ1yxpXjjZxB2sgE7+AVNZ7U\ntqF5J8LYcnZBTFfR63hQfZlEfb7BsEd/ho4EEQwbt8wCN1+Qj1BMH4VA/tjJ\nIlsZIo+NnVn4RwamhtZNkAjbp2LLbZp4P2mO4jZ5CMtun+MuJq2hmGOHWEpg\nzzOQPv2/XT5MrdW+t5Qbm1Tb7jLfV4TyiY8QxGEvHHUzWUmuJN1uca4O7Ha1\nrT2c\r\n=U89J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID6INgaiF9nSEOE3O7DUoVpgFPKz6J1PH/BuxLo/9uWdAiEAzkOZwGrvMy8qi/AH9r5xdO0T7/zim3HApyoL3tiGcAM="}]},"_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-drawer_0.22.0_1626301913711_0.6759901990534813"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-drawer","version":"0.22.1","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"^0.22.1","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"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-drawer@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-klwo4VMIIeV4UY+0t4HJ5/2Z8hUjsPHoleEFamRf97yVgPnmCHHaXhe7fjq8srxgkXK81PzwA7PFGBofS248ag==","shasum":"a9a8018d99feaed9d71f4abc510688ddbbcdebf4","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.22.1.tgz","fileCount":13,"unpackedSize":53738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72q9CRA9TVsSAnZWagAASqwQAKBS2O+iQtJJw7+jcHkh\nrVDx+aEktLu5Rk93xCYF9Fx8SuQV5Zqqhk4mBuNazYpvkWothzGziO1TqHkw\nfSs9MNJkScHYGoUX+mWn+bQTiikv5w6Zj3dERUOoiq3LRBf9nfl3QI/yCDAO\n3U1FMwhYYcDic4oscqneY68+9p2L+eUrCVTb4xa5Gyx41CFuzdC/XJi6/Fwk\nkD2pON5M/0kC/mBR5N5+du7393gY5xp3DvY7E00TfiGheWCB8aAAWaceqY+s\n0jN9PUMqOsX/BLU6+C+ashYFRSzGm1JTNtQbvX+b3pOeJxTh24HuM1ihI0YF\nuCMqvRkzkd12fgDtzhx6mxIKAXcYbLs+Xb/Eb47T5Rt+qmjCGjEN+YBTnyLA\nYMHTQPlj1kgzWFWazQcZg2VMBuLMHuz7Fv5AocFhAgCWhhPHrEmqpAZ1lR8u\n4ptE3yiwJWjBd3krPa8tTTnQK7FAo1gKpROGUlNdo1h0e8J4g7TTK1aMELRb\nUjqEp4pDc+U0u5wy9kzNVCL8DYt9lOCNhAWbyvzHVLN8x9v//3H/hylge2rA\nEfb4WzNHE14zO0Ixfs13kHqtBBSX01RbsbXYwXpS55Yx9QgWE0prINY5G/5Q\nrnDRItFVWJtweXk1BYKdFccTAoi4kJU4FOoeCy58A+TO2Qv/20XbEo/9hKri\nDfLO\r\n=FFUZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC2fHbJp1UwsiO+rZ6AT8UMZH9SiwZolmnOR8Pghk1HuAiB5KlALmI/0jt2EoiZeAY9H17b1dVAPH9aH9/x+GArkXA=="}]},"_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-drawer_0.22.1_1626303164991_0.6921370687121431"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fbc09b4e.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.fbc09b4e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.fbc09b4e.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3zVlkCUu+4FgK83m4xmIQuBIBq7DB8Td3rwDU7myzEfeYe27VenuUoi5FHZ3Q9oo17J6N0nHmT68kYTljBgopw==","shasum":"6075cb6a55de58b80397bbfeb4b3364b73c2cdcb","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.fbc09b4e.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72rtCRA9TVsSAnZWagAA2oQP/iKuYkGc+znVJA1b+h5a\nXxrDxltGMCioi6VZBqjb2KjrZjiMRUZ6DdGp0ZM78eJWUYKLj4Gg20WbLCoh\nJbmQxcSKj0NC1ouZsgv631j/+h8YOzu7zdc5meo2UiFOw3sXStvkrH6pxPAt\nvtyE9pTe1wEn+Gy2Ygu4lIQsgUBZvit/Le+/LKnkoda89xX0Ph1ObR+QyWaZ\nJDtX900RDnbbdCO6z1Ln+XaNJPAGwiv6oJd+d1LIBcdkNZr/SaYh3URUdpXy\nwqLWGxs5cIxOSfb3NrmMSKqcJD/AHQrsmxbv5semC73Kit8i0ImpYSJHmHvl\n9pPyMrgpwQZgZi+KppfJK2PveoiVsJ72BTM2duG/HZ8XLbDN51dSCJJHOrue\nkPlbst8XKKUXBSxQTZ/Z9cwSSjcVsf/56vQmqE1wN4fb0WbGhK7eVWoHR1NW\nCIFcNF+gxnWjXVVn/AmMXQuxFIW8lP4TpNTaA6YO/brksfCEttzMHbKIknZX\no8v7/OA6Kq3ap+YLfFLC0qPdWGx865nk0xptP7w1e+OHXWo/aK9ifawele3P\nnaCmy3/MjpEMbAx5RV9XHx8xHiRhVTMCCrBr/wRwln1KigZnKhAPRUEWqyle\njLgwBh30wK6mXm3x7uITS4ZZaalD5rdn7klZx0US8vkYp45VAMJKNRF4y9gc\npXtE\r\n=JfbD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF34OrZZ3z5X8sAHtaBaTmk5v5KI5LKu06rE8xoWV870AiEA1iq8Y3+zo89cZU+SpSHmXH6KSfs8hYJATvyBA8qX2cU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.fbc09b4e.0_1626303212937_0.5115668539550804"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.73e9f83c.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.73e9f83c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.73e9f83c.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-V3HHd1ZOEtA4zG6Sxl475a1u7Vy9/km3oj+Rtvb8ID51WN+gFI214MxFrVURmfA3Jx2g1aQoH4tkOo2xIrBPmw==","shasum":"df1634e2de73a5cb4772ae8202addfcc97831101","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.73e9f83c.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8JzpCRA9TVsSAnZWagAAHL8P/Rw5Kh/Z4Xct/9z1umtO\n8e81PgPlai2ohElmXs6FZyfR4iD/bVaGux/rS8aFvKWLlyjhHjzvSp5hO0pi\no3MJgJkrX6pW+YJw2BT24yvPNp1tvFYRK5yhADZ2qj+ah9e3e/EvxdJj5e7M\nNGJ3tpmosqYFM4mRqGQ/9ui75dpzj13u14NBiTWiqqAaVAc6OJEkyzuIHKJM\nPwSG8nr2JqFtqsgJZ8Hz7R1LZEqnDfKAS/Syl6IH5hTqOzbMy92b5Xs6t/l9\nbUTr/6f+PpirT8eVdjxPdMUQ6ANY1noCJr4oscrFFPogG62+QvmVe3qqgYOT\npxIjMwaFB9kfuqd8kplZ+qj1UpAb05WfOdoouVIgk4xKpO0aeAKYietggX1y\nAgMCtdDXYhhXqkE1DsOBEDvEgTi3N/u4Tqr7/O4jo+MSqGPXZ1C7c0zbnZ9J\nOsDFtPVp6k3QmM/BLntoQ21wfgvTkeiPZvjxocUddCExhyinA7VkfGRq7IRE\nbCBqVkcjn8cL8O6/ko7sP7QQJs1DSbr9JueMuvlleSPL/9NCF+xLKkUullbD\nGapKWCJPnOMzPjMUfq3xOGeQ9pO2FAG+7w1TI+9rh2vAS3egRvgCXuPJfP7M\nid4x4ihn6ujYTTQn2vLmrS8JGAIia7BuwyFQ9H8G6fryTMttW9Art8JZJQjI\nbpUG\r\n=RTB+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDhmXDRQvSd1KpaZh4MNyTwW2TvopeNUJcWsTYj8O+1KAiAkldu/2GL2rCRFwDQzx4KJIwpqJ+o3Mh3izLP0D+0ZXQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.73e9f83c.0_1626381545112_0.6985450832353006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cc0aa7a9.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.cc0aa7a9.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.cc0aa7a9.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tsUuJaJ9zJos/nDLW3T5g2wnNz8Id9Yp+WKl27PcdPf6G9YVGmS1LJLOt0LmfTTF17UHpc6SI/9G+5UVQGNffg==","shasum":"e5c0346f38fedb155933e226d497c3ac44aa9f08","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KKOCRA9TVsSAnZWagAALe4P/3pbKxTp1SEH5Iz5+qgk\nMjnu9jrmNQPZb09dIJOTcJbjobTv6IWPmrVfc4IQfQS25sjPy88MDL4uHDFw\nSEu2Nn/rYLq9z0hqg7la71rU7a9VeRVnBbR1yFBYK4mcNQhRIW7UShZmSgyj\nQcrmpvGbxWjGGD5WPz1W/VwbYFqz8+5giVafjpvKI7ovr24/mnBBqIq5b1Uh\n19tO42Vn/3JsStIkeJRPDtb2Acirx/qRhi7fXCivO4i+pB3XYf7X2u0gOGrK\ntCxVgXLZ+ilivnbdcrsmIkWpYMOxb5fn+Xjo834XFRy9GxIjL+SBOeqDouGs\nDTnFMjuO0O+vPlepxSDtZl5P3Xf34h4hUHM0N7FcqafM6rFEZh8KJH+KBrho\nA35ULnHq6veceZXXXeOI/ND6oWP1+SmbiGMrO54kFT9t0KriGljDg/DaG+QE\n5bKtIytVqlmORl9NcficyRba23YpVqUtP1WKGJTQPVY7gQvR0AAa+V8KxTTa\ncP3BiXS03YWeTIR950ldL9SQzW2mhIKWrYQs1aHs5aAB9uDLtLv0A4M6BPhg\nr0wHz5Cfbaf0owMclCjuCCoh92gJYyhv/dpGsvtwAXDCjLoUVDFYntYtC3K1\nPbKmrpn9yVZil5YvbNTCo48tRA4Hkuzhn9gJklQH56GzDuDCDJ3qMdWq5WUr\nLVqn\r\n=XcJc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCniv4Y8c4hiQWp1Vo6qrFXZIfg7e8wOt6S4i00hudnWQIhAKDXZSWcEO6Vpf4oqJKT9sl77AB0RILJsjRBnBdh1AgX"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.cc0aa7a9.0_1626382990331_0.033847600982180204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8fcac45.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.a8fcac45.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.a8fcac45.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-G6q0alcpA9Oi9Qwuyxt30Rj2cUmDISlHNSsKv+9Dpp3IPV3LRi/FAcNGl+6Lk0wX4t1VUjGVtZ+xj4yKeqw7uQ==","shasum":"fdd797cf6e0140e4ded789f9b92167fe54c555f5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.a8fcac45.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Kb/CRA9TVsSAnZWagAAqQ0P/3tFrA1H6kOmSEkC+hSp\nxTQfoTl3UIleCJYcpBbh4oM2+Kqln4eI3L+Y5Wsvq6Tg5YtQDfQeTly4Yxdx\n8BnFIpSXB6bxOS/Huy9iqHEDRjBFCCKnnNFzCInND7qcHORBBqw+HEpb29TP\nz4lW54+iiv96SnIYgb0PbYkcQ4i1mJEGSQnRCA0RxDv+4CYaxsXsi11kQPiu\nYzsF7blPbh2v2bP6sr6esajFALmG7fRtjDcKbU14IorXgDRJQzQyJ7zhxjuq\nL3CfsW7Xi33ThBxR5MX9IydSx/zEXPLYBJ5ml3lMT8Lji8cNWiSf4Lbz5Ph9\nyAJfGDQ1aInkUokRT5evwwjzUpYZPFuxkopo+tka/Q8fHA3Xf9Oq9CP2ergk\n3SrOj6GEF0RxJnRsPYjYqYaXiPo0oxTIUNZlsY3UDOI3qE88EUyqK9mHW4eB\nPxY3gcurhqdRHv2U4TFO9vJty39jNhPXm9FwJW/RJvW6Sze2JRzXjrZcVBgE\nwq8LwA6Gd2l061sc3ZGKUdcoimkuSxitSob03aevmuhJtaFnbvB+3ql0BVgk\nSVioDH9ZUKG2DQa1RV862lOlhy7eDaBVIqr+1Zjk2X7BetbrWXXevunKGxFP\n/vVoIFtBkB339hztaLnkiG3afdOA06NFi9EnMAFbkvG4f3P4d98/weUkfnWb\nVLP0\r\n=OzgP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMN/+z/TPLw3X+yIM3wKOwhx2hWIEwZkBtxKUKWkV/ywIhALm9FgzWTD5csokqazZTZ1PLK8zs39vN4mt5IcPjqkSo"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.a8fcac45.0_1626384127634_0.10002539062772886"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3ca580d1.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.3ca580d1.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.3ca580d1.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Xdy9I/bNEIRapLxbVT2VZWGBzHmP3lkfIxkxPbkdazx6/J1ifHThV39bXwv+mHt4VK5fNVlUtCwfvE6aOItIWA==","shasum":"7c1be41ca441b92a555fa16cb9c25a28a0217f50","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.3ca580d1.0.tgz","fileCount":13,"unpackedSize":53773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LC0CRA9TVsSAnZWagAAukYP/1ZghUyQFUS2zrlLNgl8\n9H4VsoARWSY4ItaQMOGqJungWaC+x8kMtvyGO3RS6gafs6J0af3NFuGWyPHX\nD/DAUs/sNxhwPeNGrCH0PXvuiK7E+JK4A0LskMd01P0y12EyyA0ZWWT+JSay\naJ7WkUWGFGxfE5fcC+lIuqlcn9O61tI4ELMkduQqEFkhp3vzCKI46/QdLfg7\nGxfYmbey68FB4EKAPYXrmYf06q+6KGzxYJw4QFr1Aj/fln2dp1F4m79xt6ln\ntqt20+C8KTHWweO688lxBvyY9wqnCh+vF7s6EPAZ2xcQbgFKizxMpGKjnEfM\nZ4s9gn4/od1zhEij0nsry+DAXl6W3skaZXRbCxNUowMFKtc5aIhsy8HylMY3\nX569fJLaJlzZBEl7gIRKaGorLcIXCQDKTvK3FyJ3WnLBvraDj3B2IZWyth04\nt0uQKi8sktOHrT+9RgKct1F2rzOycpvtQ5oZ4qNk9bSSFlY+DFXhB5DFZ81Y\naQQmnKj4SdYgblozF8DErThxtISDaYMJaBHjlIKJnu9wMdj+EJaCOJxsk0MS\nXznFE8CZZKh4AuZdrQYiWEzMh/LaDVRGIPU6ZzZny30Gzcrt8e4bFNLJvxlr\nbftni/IkjsLgiDNuL7FT9VoDs5WyF3/qeOtIQBh8WZMyYIOZP28KAl6WmE1t\n4Wah\r\n=GH5S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCv2LpNzOYooaE0M+fYBVh6W2TQ5X1ZMs5KZQiXS1ABagIgPazuSh2CcDaNXjr02bKSffgm5VJ0y2cRrgX+35tMT5U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.3ca580d1.0_1626386612547_0.8457103537920454"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9e41cb2e.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.9e41cb2e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.9e41cb2e.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9cs1w0pvysDLQKHTx8lp2sZMOAWjdkNq9uVRwM3A0dB3Z3XW58x3VA2DAu2LdzJYvkaA1DFR5Ah1P4c+tgC6wg==","shasum":"51f7fb530dcfc6eab3c1b4cfa6ade7db6d3b722d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.9e41cb2e.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8L/dCRA9TVsSAnZWagAAaBsQAJ+DspIdq1R03JOJN6Q2\nj89s1iXco/BTtnC9ffxm7HuiZVV2YGUGhffUAg4MapUm2KGjKcP9cmF9WZMo\nrO+7mMxZLLjzetoXjDYxJstyfZIr19cUUd80eb9licbfxxUqgWHpWk+BK2cw\naD83OzF2vbekKq0oHpH9JDdL852ztzNRJpeN4qYnIHhj0fmQt8a/50ixdBX+\nvHuppBXda4tsOrMDVu89/m+Zu2fVy53b/3uUxfmTwLyurLyTXiKZScjw0DhV\nohqXM4j78jD5Ff5CtiTWTARvmdZXxz7yLGv6y/AKU/Iq5ScfG7TdzAiJan7t\na/lwVLe0BEPtU5vYZ0den8OxoXJT7rnTGV93HlbWI5834qLyKQcR7TvEFVzf\nIZyheovx+xgBp5dxuBHk5UyUnz+zWR+7iYzhjXACaBuYB1bx0pM4Qh8X8Bkm\nI9rlXmPKms+THcuFhK+H048lnFWZj0jWwTClORQaqF0Vx3gBFCeqcqo0Obaq\njBD4WGdJm/LdYa42xQccYU9D0KWhAYrfF19ogjEaVPPJVkRiKBvqUK/SjPx8\nVHyl4q4F9OgZxmB8eNR4cZheNmIH/oHmZEUdB/seEZGeOXxi3zGxSjwU1JDq\nFVC6LDTjGzTwfpXZv9vnzX3QBn66XF2cxII5uZXlJ6p28XNVS48eFtpQ4IAC\nbo/s\r\n=ID1L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGbX7kNoSCzQnhE2ewkl4MAXCwSZ2Hvq8YVwA4+/GdkGAiEAibYec3Sa9upSaNtiLdL43pHY5oJ2wakt4qRu4P1hj4U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.9e41cb2e.0_1626390493739_0.1382618112998224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c180db74.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.c180db74.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.c180db74.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4ijHnWlM6z0o/jYF+DE9jkzx2bHh8FwJbRLMZA+t+ockHEOF3SKwfQgOgzRBfDtFAwXSDrfowp0dDwrNzDdRRA==","shasum":"f5b34758f9fcca82a334dd05c246cd1c05c7adc2","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.c180db74.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cDQCRA9TVsSAnZWagAAfvcQAIZyMpqWqgd+NnObj2TT\n5m+UA+wDZGPToCGyN7kTr2RhcoGkw9x+ZkJWPEQU5ksMJHDIbJ2mgLo7Yh9V\nEgX4bj/t089va8x59cm0k9eV6CrtPp0eZBmJt2vei7ZW2jBo1ovZ1UQ50mZC\nuu7W3OslhWZAHJSLHecNeORFnevtKFhMHz042IzDaKGCLFT5GEFUS2hBJli7\nlNddxDxRmGacwwT4tKDX2QzRfzdhYK3aed93hR0GBEHVgTlQBTIJbWAMNu1O\njivU2kWDbtKACcCMTydsMvn0IvZ3i5MNJWlti3+Qy7htjxVLOHF2Ve6ceNLe\nCLbirxH9P/muHMHY47kvfJbzZ03OTAEqzgO+FoLK7Kw3TKQ6qEsMVJJUOr1j\n4XYn8Ra9P1/YMLGpXpB6LX12MDhbJ3zhV+EyhKh67aRumQzq7l5o5ZFjgWU6\nE9AiEOyN3kgLpysY0B5p3gkYTblhNSf0vdqqmAX23V4xsboMsNhafAb3Iddv\nWJzRCyLpH7w4srbgJdWuv1KXLzu+eJri4bhvhTBg4Xp9LyS5OWgT1ZPFcrZq\nUp4wtxL1sYgX/9KgFCwoMRO7Ju5lmS6U/IuK6Xn5wRH5dpgl4Lx+RBtyrj3N\nthaVo653IXrVG5m3scpQQOSsygDJrZCrSQpYCtPueY809GVEWDgZX24AsPmZ\nkgrq\r\n=NCtR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHmZiDo/5d0Z1HC32TArv7cWX0P2s+dPo/fdzJCZW5o7AiBGnwEtezHwmPQnc5stGsxBFnL2QkduhmUpruL2nSwNwg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.c180db74.0_1626456272659_0.3950178829988935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.0d0a9267.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.0d0a9267.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.0d0a9267.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-46HymA6/oT5h+JKk5tzM3IgELoViI1kLkJ6eBgLSrMBXnud5/jSONjkjPdgZHdJwUN6M11klu8N/MQiXxAaoSg==","shasum":"675254ba177c21105bb8b108c537068d445447da","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.0d0a9267.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cheCRA9TVsSAnZWagAA4gIQAJl2xBO5JozyEn6hOMhF\n5GU9Yhm4i3WZURvM7JlXc05trZ/D2F3Y9nn1oTTpbmxLf6DOvK6f5htwsLdb\n2kOuRN9U6P2Rwxu8AxbezLt6jaCXS23qSMSCYhs7lrzkOa4dve+QGeFcBjrm\nkXIJbHEwiCdjshln3GHiuL2NAh5z9Utb4CGauxivu5ci6qtP96r/SkpDhpXK\nd36a/w79pYUqsgNdRx7bsmeGCfjXkiZZy6BedFERrglhh18gHnYs9jIthwxz\nt5tPyEU952etDLXLdVfb7xOx1WsBr+A1kOjZeCOiawNFoiNPP+DW3TRyKewr\nQOZAMgR/hhAFqBNK1M3YBROTCIRRSrk7jo1FXqjxHvUTUSQeY8X16bySgo0b\n+X9hyYctnzpaZICRov2qWpCiN9w1WYzhSJLVKjV4JQKtA0nedwpAW0JN0TgE\n0A02LozfZ3hLDCIFvC8ZVAqT4zzHvfIG7V7RUunqV9kzZTGnD1bkaD6CRh/b\nxm9QFqhSzrnkM32gEo0n31rgV2k7wCGGt4IYezt0vIf1S/9QkelCnRd+e79v\nTHwvJ83VolSBRg+zvnFX7TOLRM2WBKkyeEyL8IO0xoZphDU+7+qiQd/vydtJ\naz00YOTG2U7joEZ8VnNFAga3zIwHHO6nA45kI4kRUBkzKUoJVDkfNQIQ+TU4\nejYj\r\n=evre\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG54Rwsswf/evnmmcpWqEpCQAeSgn2PX1DkWkel5oDTmAiEAgjWMhG/o+aRXfi9pus6tbA5u9Z2J5mpGoe22w8BsmaI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.0d0a9267.0_1626458205949_0.3888675037527689"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d234ec3f.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.d234ec3f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.d234ec3f.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xgBKdwBK5ny6rYsVM87FYB9r4oLC2IUU4GOxtlOhhynrCvXVPYV9OPbAOpVBry2ODEDk3T1LVdHtM0PVPsQTOw==","shasum":"7e5a2530425d6668a5c218cc2b8078b56b1255c7","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.d234ec3f.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8crZCRA9TVsSAnZWagAADoEQAKG6LbzYNuJOugFKUU75\n5XS1RMYDrEElssf8RrPnwvr1Rz+3uZWb1vkuM+b8QOdRYGGaVhVz9H49oGbz\nq5jj1cvJsZGp5mbFBX/zLbCRMFsLsnh6ZBSy2+G5sqCV/8MAR2nXPdhY4GBU\nAycEKirifuxspOSyxLPplu3RwfDIZUh/jsbp9XT/AkGo5g0gJZqgMO7t6nHK\nbLthzeK8EA4Yk30Y/occQf+IclISKU24F/Tf3L0nbl3h/ni3ufhXnQIdOLNO\nlZ+f+GqqCT19pnWTiRTEZxqL/4cRSz8oNoB1ox0YhGqgcIAPMKAbF5INgL24\nahVNht4l8rWPcI4QW6S4dVQCJE9ggkR17wBldRY5BMUGwc1gIXGsntE6vuwH\n7hmZZbG+r8m97NexYr5kZEnF9IEqt2390RcmlvFg+xL9+72gcPPkd6dJ4QWL\ni87RFZMKiGxW8ieaX37Od2iRFZhHKBpFfTZI8G5umUd66UjZ659RJUN3FIIC\nYXBeUau2O6cAInuY2lGKb35sKb6Gc6yMSHKKWMfro+MX9m9yTPyIRhDj2GKk\naPYttUnpEdjzQ6U/M26BqeH4mKUT0ifwpmsIBhOuMV9pHPA5ae+O8G9wEzrn\nnRfMx+b9JaHpuqfLd7vKHYcyU3E+A0zjJNOSp1lNG8koXyLVOmReG/mAh2VI\njhE7\r\n=yhLf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAeb9Mu5bazzU8nXypvZmeidUejVPjG3a1anFR/huTFAIhAPWTppgPOUVwcEZr05tfQ0+sixBQxZg3UFfP5LwWKxuh"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.d234ec3f.0_1626458841366_0.09286653814403079"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5cd4bcdb.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.5cd4bcdb.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.5cd4bcdb.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-78NYumSx2U54S2YKtBq3YCc3LaETXqghvvR5minmxBeif3nNWoP1flHIj+FyYyxGmRumfL5KALt6vOtOn4JQKw==","shasum":"fbe90cdf96c23f5fbd4a5af18c1cbc4095bf99a2","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fYJCRA9TVsSAnZWagAA8MAP/03cFNbmHupj7Xp0RYTL\nAW3CLc6JA5Vok2PX4kx5q9jXogOTHk0KXojxW/+KxJKxJzTlpAJrFwdQg6+S\n4lzMuxL8JgktIoGGTsNerBH0oSLFzzgYqzfjrjNC6zk9AEl7zBGYRxEDfm2B\njhI2YKGwhlxwHbWNWz8pOftQEm0LbnAAn6MN19HPWmi2LyD981lYDWQwcsj8\n0JlEq9juFupajDcImqF9qDK2ZSEySLI+8l+Br54KGIgzCccEQ3pncS9XnqN1\nfBEfJzONnoDCPWj3KuDoA+l6PqvE+J++Gjp9lMbjCMzn6xUV8A7F/ek03t7P\nwNv9RXDCCSlR3j2DOtvLuYXaPFOrt72OQ1qxPF6TRHZps3ZgW4ePSYHZA4Mu\nSga6hULgnkfHH0ttTLFrwAbd2Zg17h5IEicPGv6yHJCKkcG0IyKcBMHGq1vZ\nAQWbsKE54GCO2RrwcXXP8YnWrIyMpdM5pASY3965mqVf7Wf1m5EDUyWRtovr\nYvd0xqJ30VtJxahUC7zoI594+YwYDd2C2F6sHnonzqv1Vrn7nnjYL/lyFMMU\nrmy1aN6QBx8KN9Qm0qEzPrU0vHP1zMj3Q4dx7LVKKjlHJJTXeLXvAVwXfo9+\nhCVLpphBVFG8CY3U1HPvOeKXuW/g+MluytLFPh7vfpEGdn9jSKjYA3GAksLa\n2zmO\r\n=PX9v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEtV3WQgyafqa18UWl3weHmOplS1xIS0WMezaKnndg4kAiBPPcDoklriv1K+d5YcMkAV8ncQ09re7RXo1g3llM0DoA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.5cd4bcdb.0_1626469897618_0.6294347869895149"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2b133cb2.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.2b133cb2.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.2b133cb2.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ANJPcu1US7YVn25xzKLrrmef1n1XVlRPLIdpd63gid14bg3Y3OEIgkIZIgVW0EizJ7KsSfOQBHxrJFDxZnDwTA==","shasum":"d63a3ee5bb1c5cde67957aaa0e5a2864d8dee67b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.2b133cb2.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gLMCRA9TVsSAnZWagAAZscP/2gPN54M81FSMi0YDTOs\n7ImlpJCyRKEfVuZU4Ldc2HtE5nQFmtD0SXH0XJ9wkfhUHxefy+C0s5oTUpes\nYxw18Wjavm4eHuAiYV2QJtB1h9XcQgm5RkV7auHsO7g86jCdSxfRUmZsLlQX\n44vVBaqe8M2jCgYXTjl4v0cQ84CMGf/xBuwNCmACYD8gHwDhYME5bg94JnF+\nMSfMiKKw2fKsNrSnwmDUFAKvs0a8vLsf+4Mzy+Khu5dLxD9PJTlVy9q4+ax8\ntkGl/ReN6DxfysV3N1UKnvJXum5hQ1K4d1C9veAfONFfbOxgUrpvvOskOn5O\nfQPxwbRovaJKQNIqXx5Pe58eW8C0Cy41u+EXWDajfzfN9Utul8d2Kr5KZSet\neylY++nfwrm0quvE/TaE8xX6NTxMgTRv6owae/5nI24wFd9Da3Dv7uO2yGqY\nP62ZSHhsBDOe3ca7KTBZ0bCPUh0ZCqyOUvcOK7RhgwMa2wLRqhdoSmZtMqF/\nl1fFiSMXX808sMC7BAw10cWPe3HxljG9w4QADdYWEXeEGAE5lj1bC9D9oysq\nvhNte/TZ88jGwJkN6maCYN5Jw7e7OIHOl4uyrZpKJnw3YvgvxUVzMS5J+Jk1\nKb9gSIidiWNK1QjOq2niULjnV1jMjaOddMpmEScvb8IxOecGcmrMkL8hx1Ys\nKE96\r\n=l/UO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA36Ngr1xcYAyW6J/pq+Pktrv2JGVysTRfDDr8kNGQT4AiEA2adLzuueAOxQf+h0Z5aLW9OWK3VHjlPHPDJv1+UFc/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-drawer_0.23.0-canary.2b133cb2.0_1626473164566_0.4461164616409612"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ae4f422b.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.ae4f422b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.ae4f422b.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/TD1kraB27MU68S7B/MYEifIEAjGKMiU9RuFiM9938Bws/pNxvDbFK0RJ9kfQRB2V4XUfcOJ6T9HUsEugfM3eg==","shasum":"a72e526db158b56fd19bebfe7b903b241cbce70f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.ae4f422b.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hv/CRA9TVsSAnZWagAAmcsP/1hcuR8/5Nl8SO52DILo\n6blUXQCVI9TP5VVCG7jBGhooXqBHo8s/JEVCRXX1IDP7/jLcg9IgR3z16GuS\nkZ7fCRwYWB9D0ztYDBOjnit067YyLuddJZjMll+R/k8Q1MjRCqO4bCe1jpwW\nGxR4ULWAVcZfHfIL/Co9sVsDB131xIiguwejkPGAOV5RfZRl/l8B7eRfUWLI\nvXHdmziwv+qQMg+e8FlyuhSXTAant4T6EHl1BhNMN525EjGUMrHgEu6kYgZg\nncIDAQ/jJJqRBVXMpS/shePMr/knAzhUfoRXXQ42ir8h2o2hPCsv+lUwYAFT\nC1SrslgaK/0my/SGaXJGMoLJj9BJ2WqK/b282znb3nvUlovVdkoHaFR+d+Bw\nG+TTNcNZ6Bq5UHkm7yESHYXiQD5a5bysJHJUFxvfbdvtjn/Bi3FJ516v0dcv\nDL15DKejiY1nUE930OFA0NqRpqfBt3CbFNF4SCkVHK32Vwjz6Khs/T0ZWmbe\nBOSKjlR1xzo+ArPN1mhjHhCcGutxWDDqg0qsX84oO8UTNWowCslfQaLt7nzB\nnofGGYFkVqv/kK8yC+sUMX1mYVO2spIjqQA1AUXBB/tZqq2pBNo88nZwE07D\nocdt8JfB6hbTla2tnSfPNZm1iLagZjH8OZUanFMbDAK88r9gXKjWBZGffw8m\n5Up8\r\n=b+pt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBkgRiL5DaPSy1DFp/c4dxtdc4TO4ySWP0OKb2GXFueYAiEA68GIYMUAwe6XiOxSvfUYUg6Dv2mB0mbkALDsKbpNDtE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.ae4f422b.0_1626479615073_0.3089080161523037"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90ff8057.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.90ff8057.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.90ff8057.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0jOFZ5M/OVc95ldQ/N8UrpPYBoPU39FYCm/LQC4TY++ucnFmuYmVsGnkRvaz91FhhZTz8QvRTIk8sDReOjUhLQ==","shasum":"d22a0786520b542525e0edd34879e54fe61c92e2","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.90ff8057.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9YcCCRA9TVsSAnZWagAAKWQQAKL+8JXxcVxPT+8Ocuq5\nPQIyZCoZN3COp/yfXAVUuWLnCs4hB/jioMYqFHQaSGZ9EoRWjo6IBliHOQN4\nxqTiEGU9druVg67AEWCkdwEweAD+nNtQGyr0QAAP+DBS5rVAzqL2JRloAfUE\nBY+DO6RcW8uDPiiRJFOJ6Gk93Rhi16DFhxF6jtmY8yfgOw2+j+pWuB1i8/Fd\nrZLj56re7UKiSvY2Lg0ihPOQfNqb1DMyDx/1fCVdSB4RWyV/0daWoNIoqN8L\n8tOmpiHaqqxGCuspGN9vw56G2rwxHQPemeX21sQMJv0a8gdAtP+U7ZGo2kLq\nFyqCfn89wRq83J3GGynSisd6+lUwIFyqIoG60YsbyVuQ7jKPeK6v8xMWQew+\nWPnP24Fyn/XZu5UeczcFrrIKT9EeAqY3oKE2MEAAzkbHHd6mudTgbiKf06Qx\ntPyagls6bskS9Smt7Zw2b2exKiXiK5HQJ7q0UO+MTMV5xDy72AOkJkm/9PWN\nUY/hH22+cRTA+moOIYERqXfXI8S1PGxIMtxMeBwtgfOUgXoXIxAMqLydxRbT\nq50IAXptaI3AkCbmdNkJS7/jN1rSA7crkGQsDPdelfg2X49DRcnL0xrvDQsy\nYywvk8pWaq5i5GlN6VE6/nvod0wJO3D4ia/rD5cyndzYF/6SC6xM7+mVw5w5\nuZhm\r\n=In2d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCq/zlJhbwK38P+hyLPTHGHpemxTUw3tytCXL9khSaOBwIgBEINhnzMI/+SZx7T/ILnXGqb/6yAUzEYRvUGJNVwvkY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.90ff8057.0_1626703618013_0.8474237424731361"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dd7b75d1.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.dd7b75d1.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.dd7b75d1.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xJIMnf2ibOnQqciAtA8g02Da58YAQ/mkEbTK9U7XPqaejFtf606Vmy66bulptBMR/yc8qDPgwwgCFXmjPkxYTA==","shasum":"45b3ecbe2cb0500766eb536ef7c918a418b747e0","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.dd7b75d1.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9btNCRA9TVsSAnZWagAAMFQP/jUr6rnoKMeDhJHL5f8G\n1qX2HVCWnYKhLNMzWkcf+AAW3+8OwBEIgYc/KM/wqtbHDhWY5KB7ojnoI5vp\nfXM96CGMWgWjQmO2QVlAceFGg7ssU3nZpLlhnr9ALUumv8moi6/RR9LK9tna\n49/tQJnuudQoN7eCIFqc8xZaQL0CFgZkBWGoXCFxm67xI0hp4L+YBuG41Ppg\nFReWiGwTunaokgEKiiMNV5sHwBudH/6hu79iIdce7LOzykdvOnIRKmGqLh2g\nVE4/qhsqonz8WGSiN+zNZgfNg+mg/w4Gms0e+Q8wqPFD/V0ANIFVtLqis+qC\nYZeMMompZaveT2IsS57Zgg75fWXlC8redn3kJLOBZXZ2ZWXjd7qzofQqJ933\nbLM+LaYN+G+rEwzuws0v0Zv//DSSJQkqm+JjuF+HyRQ8BOGLZ6gv/2+BEJfh\nRLymedsZ9+4x3swLiDdhrHT57gpR9It6rlwudT8Hd3S983d1WV/0fzz4CG6K\n5q4o/c10ZUAFHyJmRiqCok/gezvf7YNilgL8joRPqXDpAe2wW2l9SUhIJ1CA\nFF4eYCaXanOgia+dCk6uMCs+wccq3d2bYdU36LhXMJupRblGUrn9GZKoiegN\nGfINO/jUINBXMvU/V+mGK8b7hWVgdrHmE0uIRc2be8Ee9MoO0jWHtSEPPy7R\nszV1\r\n=MV1m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwQqRTFH7+fTSe2cDiikFnq6QCADqItZrrfOz9y3p6ygIgLAHmqhLPOQwrQiaZdxJ/bACzUS3VZy5JhOHRhYYcNJw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.dd7b75d1.0_1626717005137_0.10417138734008535"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.104debd5.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.104debd5.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.38d1846cc.0","@material/mwc-base":"0.23.0-canary.104debd5.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.38d1846cc.0"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Rx0Oa8LytR37EPDzALsl5jtsJWF05p1ltrOax6Iyq02R1zgevJ1Fb9QazUA8f+4QkMJAuv8A36zIUxGz5JotVg==","shasum":"4cd77838261a3db091fdf1bb8f4242e35b84f1b5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.104debd5.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gJRCRA9TVsSAnZWagAArJMP/0FEETNX3d8zDQFZR6+g\njfoZa4mhNGTXsBjdwsteIcluOTtgngAgj4bXLM9wyhHXp0ztHdjQA1+dR3zy\nKD0c3Sg1+FgVUfz5PAKYGT6zKTeBv3049xZskzcrgGQmPbOy94xDnlOfhLxJ\nz4uGxQ1SYOQ0QoQU+5c6t+1nnbZ6WCtgUBH0WZ7D3hfWF5+43DaifpzMcM+P\nZTIZ+aUn6sheKcYfgAZxoUMlwpn0LbjK6hM5VN6BEI7LQNbXEhonMGkwjv8U\ngOw7Ehhy5Lc5dcKNXlryDcRMsNKKWYb8kA9dJMmrfWKDrSG/5RvWSfcl5rr+\n0V7TBPMsg5XIUrebC738LLZSzbrJWlmONIgU6qnhvPoH3LJ0PdfaRO2+zud+\nggu20IuWI7G2ml+K1Rjqw5G2T/106pQ2EOHvv6NLHqw4rDEu5Gl2Mj7ODJc4\nZAD+P3FwVbY++n6gryx8aAHxGt66F3bJDvPVpLlCK1w5WE1NMXyUTZT2qCAh\n+pj026JttDpTAJvedsqXGaPc59UbDyLDxXNdWg8xgy9AbVPZjscfnlG+LJlT\nlD1G/S46Icv/5mtcxAYDJr7xP03mQ4Az+0iLMRCMdJ30RYWARtIUNK4Hejfs\nxaPZ5+3+P4osOMwy/IZ03+7KDDvvcQiwfhsxNtEed+umL7M9BVS7tFm+3Apl\nhw5a\r\n=Elw6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLmGNMf7yoE2+iYNq7PoRywknWicvTOS7U7B0vcXOEhwIhAJpJz48MDHa/JnVhPlWUozyiguQPZnnvRj7XFIF85KEu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.104debd5.0_1626735185627_0.3981631123185616"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4612705d.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.4612705d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.38d1846cc.0","@material/mwc-base":"0.23.0-canary.4612705d.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.38d1846cc.0"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5wpvQPdBjL0lqP2hHu65O5szCmX/xPvqk0ar22vJ97wWOYcMYQhAizbCyqcUPqiqGYfUeV7Bx8ION/0++obkLQ==","shasum":"12ca6de42fd68a8b585cd616425687169a2a7982","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.4612705d.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vP7CRA9TVsSAnZWagAAwJEP/jEuVeNxraxZJix8nLyn\n6xn/sC17AwrLbd3RPaq5htLuiA8IIQirnSfo8GpEgmuTME9O11cvt8UZjR+y\nLbsA3TznhmqROViU+EL2JelW/BGHFU5fsFW0xqCAsoixSNIU6SmXGyy4cUOy\n/WaUvhJagYLNZXkGNbflOXoJs9PLC/Wf/aD/Aof9hheyKfWPKVhtaPuZOH+y\nrDWJ7TKrekBtO2fPjmdjD1SaGP1STi3yHQkLefw0NOLjpgnc97TV7XZgfNU2\n8xDx8bI146mkv6+iwqYbYVWKZX1uJnuk17ZdDP9kdMAZoPWc/Inxxgs6EWrH\nZdFz7S3TI762J1kqbQJ9/bDL0VE0a/uY1F9EVXnLCynFfxeOXyI8LDgMuEe5\n1CYABWDgBDrF3ddKgIe04abSCRMDnRQT9PaCi2s0jyEBnRAewYVBB0ZLaBAX\no/be5EiBoWKvSeaCI0C59t8UZHeyWZOmAY3pIn3Eps098GHySa3z4nyjd+Ng\nDmDt859zCAzbb8RcPuvITnxIQHOGA+pCtr+0uNtz306yOk715N7SeW7z6Ydp\nUDF7U6kKchqnWRnm4wedrDMxjT2RKics4q9nev2pzNIHLAf3iu+YsUpJhsp0\nL2II7p1tfcNZ1ElIJu0+pcKniTLlpdUxXTBN0voGAkpFNwHD+oAJZtRXROq1\nmj8e\r\n=mjUB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpvA0KlTc5aFsz1o3wDI4yjSQkdtuVbk29RZUvtk2plAIhAM1uYXTMq1i1Dxox1n1Em3SzqzNW/SwvUf5aHNAfrpt5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.4612705d.0_1626797051583_0.8235091614546648"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.b36502a2.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.b36502a2.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.6b0442278.0","@material/mwc-base":"0.23.0-canary.b36502a2.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.6b0442278.0"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9gG6UukkmJB2ZhjMiv5WFLBMUd283aRfrdDriKF3xQAq21uOsnirM43iHTxa0elX27vJhLJ4iR1OyonTD7z5YA==","shasum":"34464e116db3afd83b1dcc4f2b3933375bb7b298","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.b36502a2.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KDdCRA9TVsSAnZWagAASQcP/2M1Mz8dlw4E67J5S90n\nvhVYvXUqJLL1F5NQDiZcK8LCZEtQvj7HOCPIlAFW8llX0bu/d2mh5Phn/GMi\nqDYTQc7SdkklnRVfq9E1SjC1neXrBW+7gO6zBX2flo8UDIRnXFP9tCsijIpV\nKnHhcE1U5ZY5M0yrGo4MPmglsR+AKPWmHoD5DeD2E4vCHSvvyEk1BQ0T6hvG\nyuUB2Zk0+JW79jAxZ2vP2Ko/celOCC53U+hotQG6dmXp9vXDmv4v09t3Kp56\nSK0i7//Ugr1tHNo4qiW2W7uhFIoWxRXwx5N4KLSRpwfIfjbSVZbdvuHId9BJ\n5pv9vbuGj43rEBuWyEUaK4ix/H3qbK2BRbs0LauFZ8MLNhkcuK8L2WPc/onh\nfjVO+hVvDY+0s+79E0g6c/flDPpgSJNnNA3/mqxULfGty2BpdGz1wpjZHaRO\nLE+iIfKtV12r819lQM7rk4mnW2LICxrYRv9PeStYeeqOSF3FJh1LI1cTEtR5\nuGhTIVmHG++NrrybPB/lfWjW2gw2pDsZEcGn38Q2h+fnFGQstWOIIGEKwK+M\nDweHyUVM8taFCLfYunLle8DPPuzuFnopBS8u3aZ3ugAwTx9AH+yU4gSyWMxm\n624fkyWrsC71z+ChfRRI9UpWTpVr1L6rJJFwcrmDvYlAdAItdBOaNRtFS1fj\nQkiw\r\n=nN89\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAKxC4wpGkaN7G5oVexfAiNt7HviwMU7je1dm0LWkvq1AiEAvvImyhopMu4oWBsb1NusqehYZAKSGxban9YHrqkT3XY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.b36502a2.0_1626906845122_0.411047089241692"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2c392ab3.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.2c392ab3.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.6b0442278.0","@material/mwc-base":"0.23.0-canary.2c392ab3.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.6b0442278.0"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BjvlE71thUy/JYl5JJyakQw6a+iXrPNOZED4KaCgQibkHaGvfTlIWtfg6DBcvIq82onFwqCPYRpYEG4hJWirAA==","shasum":"c6ba8706e0f0079eb884204640607c6ba23d9691","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.2c392ab3.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YYrCRA9TVsSAnZWagAAI/cQAItKX5ESDxSK6b2ryRHK\nAcbXVptYleus0NCIM5HxVc/ABEX0/T8vqTKrUlzjo3IscXJAsfC8hUyj2ruz\nup5PL7I67xiHV2SE7qVsPDCFmXoEI1DYDV2Bj8YlVvHu9zxZiGxAQOGmJVTA\nbaP/Us4BDes8f+BdWCIuR/V/nKcHdOZWKPVFS7j5/JdnoncXFxuiPfZQznh4\nlQQS7wL1ey8A/yfkrh5BhJ0E7RbwjW7FV4l6e/d0yQBnySGXXyNOk32YenXZ\nM9Agyr6CTkQk6G3vuP8Dye5cTYW1HSH5WsuZRdyIGJP6a8DVejH6/lwZhHkl\nMheZBWLW2TSqfqahlQl3aj1PVJpd5xHmkWNioZa27kEtT8pCla+bo+0V+Zfv\npfv1sTH/d+j70N+B6EJncWu+jR0rWDmtMc/Lv6NSX6LTG/guacOONewQvTOS\nMsCMa0A49h36X9MwynNfwI4w96pD7FrA3WCG5qpXaKWPlBVwdUxm2oygZKkM\njW1DUAw1KulY0BozomgITJMPytAiojzGhHu3q1wM4L342QCTc1Qp/UDi0UYn\n7PU8bogRDxWbxmcaDRHwAVlZuSB8MCy+6mR3CKZsX26XV2RN1VleRCxf3ZW8\nqfLs2y0gsSnzGds39QHbq3skzPivhUFGps0RFnx/krcGOp2aMXAyNZk5Nj9B\nPdcR\r\n=JiHf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuDJ/DJKP3mh0cwK/6ujtksMZ7Kyn/9PPKGbOeLBwyegIhAJNsmwMzzqp94+P+QLJEBPHe36/JyP/VIQCYhuLcTnCB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.2c392ab3.0_1626965547371_0.6197750340022512"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e8bac95a.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.e8bac95a.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.5f00e454a.0","@material/mwc-base":"0.23.0-canary.e8bac95a.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.5f00e454a.0"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-F4JU6uUDWuL+ROhoyKg3xg6ZmWqpgLjsRfQkvbKX7hQlfuD3HNXMGct9vKyK0rgTjMMHrGQRIGt8JKDiY4g5OA==","shasum":"10476e050d6ecb6f94bb7db819a0d516e3a1fdd0","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.e8bac95a.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b5sCRA9TVsSAnZWagAABDMQAJgtnuR1JWGEyfoLgsJp\nCPzTbY0U1yZQFzUkubP1MRTRLH8c3FWMYnnGLnImR1/XTpix50o21OfxS6aE\nbhtDSGQE1VgCMuAtbTcrYk+bWVd3e0aqpHbt9FH2y7XIgA+kQfvs8mVVZLj3\nkI+JA/YBsJDdgejrc8AT8rYchHq20VJwdv7/xg/SmggQiRHIhnAyI/aDplaK\nmKeOB4SwLjIrZs8U6MEQS7901X7lokXDwXg6GEFAqjT6UZGzUqxQ18pAlgAH\nHOTuK9g9gdCRNk8Kc1qYe92rfsRmZ6C8pGxWpRYq+NDr/PyBo0AId6f+eWgn\nwN75HZxH6nZnlis040d5EymRIzulLImsbz95adlK7hzwchDDqemFi+2U87GL\nITG9rEU6MbPGoW9Xje8RZ7LE/6opbFG6ZCfxqr+qzmKOyOZLrh0EoyMaGRjZ\nTGmY0ZKIibxUkH2A+5Gg8sEvXq15EQunan+/nnU42Mo0Ckc8ZF+vht6Bj44I\nemMTu1Nln09fOzpPXfRrpOyFLFB/UCIl4isnLHjZCymA9d832qxC7wj1OabO\n5+r1oniNVnjXat/zGQ8DB3/RikpAnAhLKPgLUgQjhiP0KMurWKrmF6wCaLeI\nu2tRskgcVSXNyQucujtzB0UKjVtA2Wlmtya2Uskg1l/3AIQQkyHs0sxiKrud\naE4u\r\n=9sgp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCa7uxEQObCIP5cs3etCBKGFza24ryU1ztp9yZ0mKtSpAIhAMy1lb7CIf3DS3Zai9L/blxDgyCXwpxanR7A3cSzQ/G2"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.e8bac95a.0_1626979948543_0.9298803454053737"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.38f29f8f.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.38f29f8f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.38f29f8f.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2x0KayPpKndoDNrSzVGSOwphMJHGcNYQlmWaZJ98z2xBHU4ppsZAJs8iFiqfnBLLTrCvw5Dmrh41UFK4WeYQlw==","shasum":"6fc31bbe438f08ddd493789498192c7e9e16004d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.38f29f8f.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wdHCRA9TVsSAnZWagAA57oQAIIAeHlN15A3TRR7voud\nUNQeJEQUuMDQnkf3NOcoe4qDPE5CX/N5M2nAinjUsYeOWABwYR+q4OSZZawb\nfYTla6nGfCxxuaOodZk7d1Z2ip9dQptAnOuDjbacMP9UCChMeZhwhIV4z3K8\nUOHB4C8cq7VAcyyxTiEl5il8cG2ScYjhydrnNW8DY6YCbo0zV5fH+y2b5dP5\n27Qg+lG4APGd1Z7883UHVC2Ab2hrTi/ThOjDneOEJwX0hIQsMLNh/NMmlFGd\nTe0kS7s2gl4ZeP0GDMYIJObaBYPFjhZKrukifce5AuXqYctPE9pfxn2YTF3w\n/gddM8SNh9gssuv1TCsOEEfClnQAT8qewnjO1SZXUi8azpoPNb/Jh4KH4fkI\n1PrmMJ9uvVU8LWQI7g1pwQ16jXBqpT5O5lSdDsNGWw9QiS+qUzq1vnHYUHbX\nKM62mFmt06VzHQER56eDIB9SDuo3f3cmP+gAngsK/lvfK+WNnoF3GqV+7Vji\nYCyAAkEsIDcYsiSSIVj8Z4sw315GZF92vV+zDWTHR3EMiV8ijh1WRIksB1Ru\nzd8fNH5FxBltxnmDCwJOO8sWI4kQ5JjxS4ts24L5vKMS7+hCndLHVAcIn6AW\nhDNFe3gVTIQsy7lRaBk3U6NHCvm0a3CTeXju+sROGJ90mUuZgOZY4TTJPeXz\n0lt6\r\n=2s4s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDz83JJYFUJ8l2F92CxEhhf2iYP7eBJoaOeE38UF0lntQIgWVdx6cBey6TSsahbRpvhN1A4JKUo69siXIBGzp/yUHU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.38f29f8f.0_1627064135396_0.6986622656576018"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e0693475.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.e0693475.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.e0693475.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8IO7FkHE1oqjUdI6L6qpW38JAI8GbP8Zw/FM/wihYUAX3y9C43g93q3br3wWjwewoIikgl6XJoMorVg5PdYISg==","shasum":"5c2649e34c357b5162ea2e953b7eeee6fe328597","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.e0693475.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xCvCRA9TVsSAnZWagAAhJUP/i7R8dAF/WmFl6NfDQ2E\nVE0RozPT7ygx7Tv/VlHlpcYoECxxmxlgrNx+zGiJc2OXH3n9mucmi3y/ipt4\n4lXosNL4yUPt4GUAUvMmR5ud4taq3me8bj1CZzEJ/PpEEn9E+2zTS6LsTrKP\nElpwnqhbGmKI8cxFoRr7h9KFQfkZmpTatHDD7CtYfR1FuYAt36K7lqQCqa0M\n6wvPnVD68Y5fV4CHlR41JZKihFLdF3Hh7VCEEmOnUTr1FcrlcLsONKMpgQU8\naFUeBy1MwShguW3R+IwS0SAGQfmUCsuBeHtvA880xKQsca2ljnu9phYdWcTO\n9YRs9iFEfa87sxn3QDcrH16IqOaAC2RXJ9/Mk4A/0hap5xFSdkaUysG503yM\nSo/byc7rBspMT/3CTFAZaYF9AIuh4lhJUXAHCkEFhqBP8iwmmcVf2pzvdGdv\nB6yjTnZ0kY90kV/etST4QLL2GrdtetdeDE9n2xzO61OR//dvn0pMoPvr31pb\nu5XJJz3V9ST5a0Cm3BEhEcf0kKg/yirIcqBCZ1pyV+s4F7QcnxCjF64dXNAK\nVpWKU1XNhFnB/B4YsjaJAR5DIDfygbb0Z+3WfwrQdhxmbJeD9eXIHBj0wc+t\nwtlSVhzJpwIQYoINtWmhoG8GzWHOZEJ1pZeAxXaZk1G+7uUGxAlZTe+EAj80\nJvch\r\n=GERz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAssdhYuqMCRQ7IdU3zvuobLAAdzpO77hbUebusU2/m0AiEAnzqR4wgV7No2v9Q0zugcWkicw2qBHMR0IVg7Ct1frFY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.e0693475.0_1627066543480_0.8503816253376819"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d595e030.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.d595e030.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.d595e030.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-k6zbNateL+QPtwZP0XQjeVcBl6x27Gk7L40haTCk3wmeV+1qcPu+e6vTI83kCD06yBOjDO6jHFchLISczorRdg==","shasum":"efe1be186ac783646d69c44e976dec389172a795","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.d595e030.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+ywdCRA9TVsSAnZWagAA8ycQAJxU30ftM3m56slvuCMz\nFhNaoF/HXFPcNvGHy279z0IxDXHPaizOkSIq7HirU3S1ka53Rl+IrCtltZCY\nspkgaaAtnylRdLb6/Q58xeFjcy6QzZ8nv+H/wVkFPZHjLsuz+6FqUuQN+q4P\n60DT9AOGdtF/3mJ4bHm238FjrizsC2Tuv/+EXQZv3p47yljhfYHXXA574CZ3\nDBIU4z7g7VGffKDpaG5JJ07d5My72YBrfw8rtyK8BmzAQULSnDJzGAWh/45l\nb2/Lzy1ZhfXY8DL3QErxtslul4g2xi64tsFdXzhAkp21OfAQ7Uhb6hIhqTQ9\nRsmHkPKp0PkqwOz0RTFE8zaSjiXJjMrcVdwGoJdtHlz0ojaNLmhApDRPBxGq\ndxgkcriXdaYl275Is2reKqxMWy29zXxSWfDYksgucs9bUC9VFQd1HtAUIQIY\nQR1G1EBOPrrqDLQg58YQwrbl01tDXXKY5mcTLs6WoQZUw4Z8y0/Ot0zkhgsJ\n+YJ/C0/kzt3JnUwazWx/G4UsLKTstz90I8eJxh31d5F5qlmEl3MumS3evnFD\nUkvZzX9bwIkLpy3QJcl2txJRg83RN9IQ7qeWJqL8M793SdBVnIapYStHm6YN\n8dIvZe+1IraDxWfDrmgFTImZwsxPbfPM28a+AMx+ijKfdjXw602LYfUcnlXN\nngUW\r\n=xJbu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGa0kFJdPRXhh3Hn1mG6+RHqztMHlyTQG/Gl6/sAG+FwAiEAyfnz7rRGE2/Y9HocVF73pgFk8zuT0tatW7ajg8WLwuE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.d595e030.0_1627073565786_0.42956648424086574"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fe7cca31.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.fe7cca31.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.fe7cca31.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-S/1fsFutxs+YU3nAK0jjkTXhhCugr6oDe2CJoavNmuyBcM90nu9TVkkhYXoUotPLEzMPpaqf8SbJfBLdcVd2tg==","shasum":"dbda813e4c53ee0f0705ba7c9891bf42917cb032","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.fe7cca31.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zsFCRA9TVsSAnZWagAAD9QP/jZaQosSdamqt0X59CUr\nw/63GCsrleC86GIwgjn6upIBq3j36p/2wm1LPSIDn5PRSxtwSJuj49Br1Vdr\nl8yaIPn4+s5TfR4WkDUZxVeSWqmW6QA89ikfLIDTzdNOr5NnddY4MhauHKbr\neNNskgAMfo+IJl+q2Oi+GR3A3KolIYeLUGuPUqMk1g3N4gktS7yYn3WyxWPZ\nYYoBlehSONtxUL6FwEwOTSEmAlid0OGyYhnY+3ZAvqncBuSdhepz5pFEYquG\nhxzjMSZGyV3QjWSN2ffvFMrn54BQdFQKSEinQOSjA/I6cp5Ui3cIXAaq3sct\nJJ72nga3PUO+MCNa9Bcx/cIkyfW8BwF1YXNG8j2lNw8lXXZoC6oK5cI+jli4\nmhNHfwj2wMEIH4DzZgx9RoPi6Xv/8Omz+QqHSTsvCzG3Odyc9uE5KsmchoCo\njFYO4oIj4VBREUqwv7HAWQGw8d+0nXNR+c3ynIxEdtb+ehkzxHKSqNWhuhRB\nslH2NEUgMhkuK6XUFoqAt11sUS4f+4ecu5w37lv8dz/C9URAI5qAzTHFMcNB\n7Ty3fTny3sj/QxVhOHMrDy1U9np5wDvgL5bjMlXn0zPgLttZMxFMDHI3V12s\nQvPHy3m1EYH/gjlEvDHjlMntOHSIQTr4ikB7Sgr4BNGCFzVXAtaFlp1pIVQ2\nVrgf\r\n=29AF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6cfczTysoBLOV8Ed2qsc49sl8s+NUbRf1ZileM73HEAiEAzoVYMo6fJfFvGWL8bshVOFDvPQWiRMKz6FM8iArJBoo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.fe7cca31.0_1627077381436_0.9721192525071536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fd9da483.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.fd9da483.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.fd9da483.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Paai4eBiHlOAdy4VWhWMdFWl1rjEfXFA/xJ6a7B6eY2jLcKLvH9c9So43Dd8sxySDFWFO2Yrz5iHShWl3MV3Xw==","shasum":"d19903bd71688808cabd4d72933eeeb8fa44b987","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.fd9da483.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/ygGCRA9TVsSAnZWagAAEsMP/j0VmOyTAB8rCh7rmQ4C\nKtlzrtX/M3uPSsYs5NUQiOzt4I9MN7kpfV1fi8NgIOVHbms+L9W4aE/Fzsyz\n2V/L2OTAiZ3yO4x8NBtAAV7GiUHAPDpC2nBS89qNZ55zxG2N2EP0lmxG0HYF\nTlwAUogrkvGzaPHEzWTREYfG4IcJI+X07yfTUHRF2C3F45aRU2eQtFm2Vhiq\nAY0RG/p/UOovwTGRmZGc/l1nPrnIXrgFFwbS9q42E8Gs593TMVw2jA7FtZ19\nmZeOIpkfvrnOw45N8P0Hl9ZD3TfCz4wqmgqfxQswA3DNhSDK7Sl1Kfh+MgZS\nSiAWtQQp6KFefYReNhOFs3p+C7qIE/+4b2z5vvZyxTVnp5FpKDdEkq2dV9TT\ncfovrQQjHqvdoaum9+/Pcq6QRG4cw6r1LpTl+/X0zxZVDiYq+w5xlz2CDuuH\nw7XnApgbSx9eawLWZ/JuKR94U7jyZzoqJyjbqqaw7cWHlJQA7GgKpJYf4zKH\nhtbsLSrWM3F2MJlDT5VMpDQwIVrptgmdh3DeZMxMBaBJtM8zOjOiT6r+kPHk\nfWYXyhkMpwUk1bxDpVNKq9byC2PR1ineKGLdh/WtEQlMbTz1Kw5sAju2O2Yq\n9Qlnb5n7Dbhso144cbnGB//5Jp1z0fLs548eiR3OGX/96dA8cGnvnD/wDhYz\nJ5ig\r\n=sb0E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBGcXeJGa5W2IVQ2UdI08tnxNTHqR7yRqFirkaVnewMoAiEA7ais0tQkPoXgee5wY+3aEZmCJTz3MTcQvjLhCuirNY8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.fd9da483.0_1627334662233_0.4198867670960371"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.8a4c7e06.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.8a4c7e06.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.8a4c7e06.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Fumj54yPjkEKzTxGQpQzsvOQL6ZjkfKUwfAXXDYXdtJ9Q5goVTVCTTrtu+CnepQAH8iG56PwSGWsOQUTwD+ADA==","shasum":"2e7bf0e3b97c10fe5a1037430e97a27eec116019","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.8a4c7e06.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zqbCRA9TVsSAnZWagAAkKMQAIOUrFqS4yOOB1BM2/g6\nGsucX6BzRAEV3/LeT+GQlLXdYLuIYk76dwFP9lz7qSPxBS+pUYAbWdMkFGRf\nuhiaYgvAtucTay+MSU3rxAx2UrB/O/tYABXsTBz1g5JBp5GChD5CdBVh46WX\n3KH53L5UEc7BYnK0fibkBexI/xo/+8GXTI2Zx7qDS9+LxkWtOa243F7xW1ie\n+zlyyDDOVFGTQGaKeGS6MqnAExTQlxN2eg7LFMTZVUxr35Lsd9SR/c5Mat+H\nt5iU3qhxaMwy8tOIFV5ipXey2uiF/WtO3bZmHMLkyr66iPTyam1iuEX22+dw\nfWnD8YasAjJw9ZBGFDTynvQigI4P8oca1h+i2aQFOc1F3AXdkDdIoIF6k1AO\nTyhsUiXA+0oFOY7TryrC/VVp66X56xSVzQHGuKvZSv6wPhgryy6oe8UVp/H0\nNd8PMmI0AyI+02v5Qp1OJzIveyLAzkZIyDCqREhpH/vx0jMXI3M9GlnDRtSi\naCmAOZXbrVK/r9DRuwpHek9ZTNgjU5CcZHh49d4OWRDuYkQ8KzzDde+lRiuT\nYTg5SaI6rfojF1qVRAGMDj6qv8JxgLmofYacfR8Zur/KTj9k526ZH/qPwRba\n26wYQ5d94rdrl5zf/2xpV7ouCX6wdFfoTcVt2peVljpxwFgGjMlzhITvo/C2\nM78i\r\n=liRU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEdzifn2obmOIDKmFo4A1FzQwQyQImU3n2VEv7Qut2NlAiBCikzJmZs9IsjMrLgsAZAonK0RRpmMRYb0IRHKeE5+PA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.8a4c7e06.0_1627339419407_0.12436700639059906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5b395fd1.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.5b395fd1.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.5b395fd1.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-H4+ryj6gVwuSWY3tAZS0m4Gk6sefcrnngZ3ebw1qE5J4SSJFuUMFYCKp8AJti/Z3F1i4LmcbBKaWQ4Vlm9SqeQ==","shasum":"2ed2c35391010a5660b7d6b99f99a0e36017a811","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.5b395fd1.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI44CRA9TVsSAnZWagAA03sQAIwMRGafm5I/J0OcilRI\nbGK6UYjO9H8sZhMhl6JoZoOVj9trXK7/0+enRNPNDgu2WdnfcaiosfnPBXMs\niRUWq2uaoFgHFtiJP3IyhM4MOkbr1wPmqAf329j1YMEZnlVMcmkEs0E7V0f5\n1x9uSW0NrQB5F2qdD03vKbEsEd3sKzkmfPGjqVHQhhXI2Qn8779Ja6rm0ZcS\nhgmDnL+5BujBjZT5cCkeBmDP4z8fnCfFaxzfBXtrAQV8/EZ6iALal9/vJZzw\noMQzAGgzmiuzXqmj1nj956q01gxzdA8EmEGa0AjPy20X97rqD71vabXYdRzf\ngMJDYLKHiUAC2JMAFSaFZiBtBBkK02JRcqRlbo5qDkmUDDMa5yOdyHGk5YqL\nXgFdsSYRQ6g18UlSDjf0VPni/tRNDhwxo/tc+mibhgF9rkyBoxuF2mPpC5QJ\nPwu4N/xmaZFFvae+eaQw5zdgbRaowp3UPJdrVmgYcn2q2L2Jel6Mb+DD8Pno\nT9YZxlfZP3OfYV0UyRzwNCKcIIRt9jQDMyMkElDhwOkHJFBSlp30RP3msXje\nu233Rdx/MpfXl0Qh6FYSTSXmSjxFjn2zAVt9vhdgN3xN9k4NTRA4hgGZk+Fc\nxlBbXw8ZS+JGKB81KbGopMKUiv/0X5ABPejKsDW7ubHti0jFZ9bBJHY5m25w\n0VZ+\r\n=1Hog\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEXuKt662hluuWIVpjYbaHEFNVia2snEAkfxk6g3+GAGAiBe0MK4rRaz+gBLw27cUPMfq0DDIByGDM8l8YKUQ2JnEA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.5b395fd1.0_1627426360493_0.7043513231373204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e5efdcc0.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.e5efdcc0.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.e5efdcc0.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-b4+Jpn2GLeephvj/2p4ev0k5sSQTkaKsgODjMfn9GHcPZrW65j7gbWouLE1ff+hLdSPRn4ZplWcRh9GRGhlb7w==","shasum":"3e2e74e7da7976e3fb340c376f3ed04cb125dbb3","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.e5efdcc0.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZIwCRA9TVsSAnZWagAA70MP/i+Dabk9k0Lmt8aY8vsS\ncWPtmRKQoJM2lqVo0tGEMUlc1RdDCxLCUHAh1T7HfEFw74iDQQg6XTcGYd0B\n5BS9MxU1me/0QpdOH10mF3C3OBsBap+mQ5RqCRKDmv6SLF7YMGGrpdh2mfi/\nVY5m12r7kZSOO1nI34ALfv6Mg4b5vmp9+bWKnBFOsvIXENt9LyZumJmINRh2\n94cqil/6X1peIJ7cWcTsoOefXNEDlYg0U9QxZN/CuK95OVHrVTiiTDvm2pf8\n0D8wW/kwvodHWGqlMD1Bq7Rubb73ZI9CHSgwgv7RdPsYBENL13R+ktKiy5rJ\n68pCNpQH4EbE5sxu0ggKZLsJv7lIY3sFEdunuoSG81YCKuZHodkpp8WB8aTa\nXxqEYoEm3+6ZzyYx3PYfBjQbY23XObRqMGwNdzlBv6Rqa9z8AaO+2bcswW/M\nRintuxlomWyaLD8UsEcJFZsgAokUHWA9IT0x7I4O/5YVHAC2vjUavuAE7DYW\nhWRs5ezBCfx6aODc99ZOixTFFKQGZZOro3gw2bRtrLAbfWPsym9aE3lpESHx\ngFVgkazTHGZ3cgKdGsH8W1IYy/oXsgqsrchpyw38VuA7Go1odATpAXaqDZYU\nJHQaVw9UYXVSwTJHyjpUSNDyVCqxEDiQDsUw3vS8xpufn9sPoPjSFdeFT8VN\nG3fH\r\n=GsHj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1CWnC/ubDfq7nd82ymx7hAcygpneBHJf8E4c8MCE5BgIhAMGXszYnqkVpWyhTmUsJLalzRt0kJ/IeFZYYy2lzr4wW"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.e5efdcc0.0_1627492912779_0.027689772503336485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ab310900.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.ab310900.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.ab310900.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-P+ccg2QYyj1Jm0Uaz7cMsbRCJKygDgj+/TOTYyEvlxV2j1t5/7i2uweRR+IVddUqyMXncJYIGKCSzI53kyjFKw==","shasum":"26a44798be953516583e876ddf3fc4410abd5ce8","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.ab310900.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbwqCRA9TVsSAnZWagAA2jMP/32kdJO0XuksbPNmescn\neDVjpzuthOEKvY6RVDmN8nsUD7abf2voDMT/Ev9TDpB0/AyJ0mnUK+A8SGrP\nNpS53JVpJ9Xu1OoVeciw1ibVk0Qr41W7sHszqYxHCzg/p4PapT1z2h4Q0a6t\nVbj0q7t6tglgolbkUXlKBouVc0Nj9lkjyPISseaL9Lg2vez55ed0QL0cIFsj\niZs34G7kGODGhs2mKQDCe++Z9LAX/14nQ2mlwai7c2piY3t63Jde7LwyWboY\neFyH8YjW7Ugf8lXaD0lzuw20Vj/162w0pwOM1qi9d/oQHOTnf+Mudy4zXO7i\n3W4GBZI28Y7uktv7cw3sr8LTpDCyP7nwkA2KdDSMcgsZvoDM4cBg8kwnSCs3\nu9KgoOzS74yinLIg1qh9+4A+CJAISbYgrvHa7TliTyHdHT8AOAppevQxAVYs\nIERMnsXNhf6ZrRAdSQnh9lkipB9t2UTGgB+Z11/BqB+t+sqshAYj+GH3msod\nUUfIWGid6ENLHOus9LZBeaEYnuDeauvMAdnXxDvE3npvy79ZZ/vB+MLiE2Cc\njq6cH/4kxoOxRKSdlNh+ZEvifcxrdtLHFO56+zC5ya6Hbi8eQUkMSUXpMBn3\nwn10+2NkvXkjOMrR3cM9LnRKPdMrEdOrjUL4gQ6c7fp8IP3t0hN5mQ72w01B\nLq2Z\r\n=G8jf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRGJjZeYA6bqHNPpfgHX2SObd3jgbQD5f0od7A7umnUAIgRUOMfB2dMkUThWmz043gvzbAh0MUTpeqrobVoDHvi+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-drawer_0.23.0-canary.ab310900.0_1627503658428_0.19492667568237398"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21dc9bc5.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.21dc9bc5.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.21dc9bc5.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VLjuIRHl82Qf7kfK7+3Pdxe82ltFo5l/F9pu/1NkAgHnF2KcW/XFWs3bQM8oU9tMH6VRO2aK9UdFtlXlapkHWQ==","shasum":"a2732bcf6041b36dd5c59f7458ad82aa78c2ae6f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.21dc9bc5.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb1ECRA9TVsSAnZWagAAiuoP/1hayCpH+OfniqRWMdj5\nd+Y8vudBf2jLezhY0o+dCMVK1h2ruWQc08Pt/7c3SQsC1ac2y11WCRceCxnX\nMjx4Smcr0CBeHOaqJYeIq9ADSEhYTLSJiuOc5pSef/DpWcYHBCUFCYXo7mUM\n96SUeV2WtxCBvZ6xzCiFbosqAO6MSvp0ferPKCI+2sWNmcHeqw5JLS8J0Itz\nQVg1zVOE1/P8m3+1yP/SlCSFX4XMZMOaG5jAopGPf6KPP0AbGBhOaztrv+NB\nUe5WZByiT/W/TTcEeY8bXYKDd4I2rndVXEVqa2xTSEZHcq4siKtVOZuePYim\n67VifQCdjY5PhYz/85KCpmTHsvX6helUy5yWD01vooEEdvPOpJ43322Os6ty\nQ17aZ172MvrNhhHI1KLhgL3fvBzLu81GsDEWSqyeCTt6jIatkr45IxWqyXpJ\nW7Lx62rYKiIRTKtN2JzQWabXAXJz7N7AJ4fmRVl3rH7+GKsrym01Ww37cptC\nr7Lr9X8MlljNFI6kGut5HS9NB68k8hd4lu+fx9msnhqCRRRDzhMrqbj5Iz2t\nH2gEsBGVm4st1YDmIpfkZ3IDkZVHpVi+gAmXVIPxZGSNiOZ5h9DW4uWfEBIo\nRBW77R4+HpQ6AXRkNtdNNE9Fr00FVASExvMDVjZ7hX4hX/8GgSvR1Se6/8FE\nGBWb\r\n=Hwf/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFefOmvQCYHBymbw9xbRwRlBh0+3XZ6WKsh0YFVDPVZFAiBcmGU2voCF7IOWJQpPVIhHM813Kvw2Ow4Q+l1xi8lABA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.21dc9bc5.0_1627503940724_0.6351145011375319"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.68c7fe5c.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.68c7fe5c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.68c7fe5c.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FKKHgQNXNEzoH1pllPylMkAeckJz4heRz0dEhSf8fpCmcFXHM6ijQPuv9IDiWVbnDTl2zVbmsTUk5UcjsWASZQ==","shasum":"9a92544a12c14bc27bcfe750f2dc89e436a85878","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.68c7fe5c.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvPwCRA9TVsSAnZWagAAP+0P/21vbUwgu1OKHhfpE9wJ\nJ0j+tsrvozI6dcTIO+L+zixlNUx179Ur3ZxLfijRWwYGkD4XsJtFnMhMq8gr\nctVsRf132UTms3BRnIKlyeMFymJx0pRvMjhEsrQ52Exj5O4Jtsdi66w9ZmNE\nxKPP18+BrtowtWMEl9UqBgPMeGT3dJpfNwg/ouoiAk7kxx3NI9lQggLgRj7R\n40iW8HYF+qOnD0pnDlXsFouG+mzBQI/Gd0/q6gz5TjaWLdo3iWyeUUQMxyWG\nXaAZwpfSgr9MwHNFUQLrBNp0wHdgRbSmbcT9GgGBpCdZiTh1K0hDG49zVZhe\nu42VPJlG5xlD4RFXnlUmYm1vXqDdFTxc8f/LNKIlKJDaq+qGstG3Itw4o96U\nnzc80ptwpitfKSSkjrqFfEH3POaDQzjMMhPlt6iJjYSuggdF+Fa5UAcJWVR0\nj+NvHBYKX3N1zcO0pLOtNvkqG1DmIr7xgmFriu6h45MmrG97YtdRmWTCwv8W\n98SjZk+WL4TXv4YAlRZLUzz59KgMHlVKYJfLXYMq2E2m3oVGisnOwthU9kHZ\nXHns/HQl6YLxnn0y5gX0q110vJLsZ2Lak6Vbund9oG1FNPHEkFZ73rtg74nJ\nF+rMfsU5MSyAxBBlXFPUdzjkj3l/D4HApmBMBF87XFNn8mKXw0FDGcHpgU8x\nydXu\r\n=qwAN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLzUIhM05MlMa2/sdjdYMbn1ZZTfPPMje17m+O83+/GAIhANQCwcUga4tNplpDJUyRYqjrOqZu9okqbKbgcs0TCk2I"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.68c7fe5c.0_1627583472593_0.953793043309332"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.aebe39e8.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.aebe39e8.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.aebe39e8.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-B+TRx0OSsT4uq1/f3OY9kwVHcxApDXSIbW0M4siR1hezvzo41269dIuvAdKDcnm806ZwBljaGghavOYsTcrGSw==","shasum":"d4f53f2a006d0ec4d521bcc470f68510aa57b9c2","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.aebe39e8.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE9NCRA9TVsSAnZWagAAD94P/3dOfgDLKckrlsoY/X5n\n7fPk43bHqIpZVI35EvfguUCUkRBsRVKhGh0TcvUzHUX5/kuXr/tEqpR+zv7M\nakgJaqmN90v2kYWLUTtBcmSBkjDSxjBR2FCS5BXof91cyTz/Ehm9EzDmijxY\nbtB+4kFoqhKnCUwl8CbJ9/mEjgSpcjdIxngdWLkTt2PXawm2hBlsjI9xx3zJ\n4pErf4qIP2p30z26Es9psitg+x8QbHNB5aEFVgMtSIhpbXp1r6wtq2IrMTwe\nY2riqfWDzwe3nQCylQXRCIa1A6d9Fg+pIaHIRO6CRZdr5qX54aKQqjUKYVKe\n2QkswEybd/5ozjJft3m2Dk1bgnex114dzyG0KU6Cm1TCX3t+4KIxrHBKg55R\nlKaZCxN3Yz7pAQfRe5QpYN+CFhTtCXmtJaNEFkbGiH109GOU13PgHdYUYGMF\n6Yi22/qBVAvm2DxTlrk/t+1XP8ewVkFYEf202wYogrQuoQpGdyX0IW5kYCIH\nnHlVGMalye9YbB4J3IqgjzRYdtDxsp3SaS0J+lVC67oeW4HCVNMKLVTmxSCs\na7RTTbpbeXZLEmo1erwjzhty/jWbm1EbVcF3jeilsztpOXY/pAKBQHSpyiZY\nT+ljoTrML/FSGJzOfpaR6/ePXtjEuaZ3t8btwneTpKhYsLXaBao4UUVS2ikM\nG1TT\r\n=9rUb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE2tD3GIJWWK2oS+Aa4K0dbZA0VAVclTElNnLltyJkTPAiByNr853nGT5KlIGMlhuTAS4l+KB+jc+tsekDsL7ySvYQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.aebe39e8.0_1627672397201_0.26814059159763826"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ea889c69.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.ea889c69.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.cc5377458.0","@material/mwc-base":"0.23.0-canary.ea889c69.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.cc5377458.0"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LG7hnPI30mbdpFao98gPF8pPNQ3i7eOOsFLHN7YnzxOf647OqWhT9viEoaU4vI75rYGNRd1hXUTqhfTkDBHlaw==","shasum":"7315973f0ab7f0425d68c5d71c982bf14eabb4b7","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.ea889c69.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY85CRA9TVsSAnZWagAAgXQP/RNOhfFEXjFYO3+4B5dC\nwoTK38HaIbVxwWJ/kOrkLmHxD/uHdkqInNDOcz8gKTge3ELoymxx+93gOygw\nOodOQnokqoZYXAFFWBv0gYZlj6Y7voQ7E83zqfowwusStHWq+oe5ZIAKGui7\nzq7mqRqw8HDKk7TTRdcPHhGsIofJ7Fk7NounVFB72PQzYwFcfP7tM3Z4BPEv\nXGNGN2Yfw0sWe+E06JIqN940j86ut0CfjY2R7CrH8waoYq06kJbt3p7yOM3J\nqO6TljiJ9HLZH6M19qfxuHZ5qd67ZgcVZvDQCVd8pd2GG2F5T1Lsd/Sd2HOc\nq8fsJxCXl9A1oYs3l7fcVt1WjpaGOq7+F9Ci+Uc2NmXvo8szG6oMDQxHh5bl\nWgcjEyZzycKZdtANAbT6l9PCFjZz94+Cl3oWBXw6iGZSzZCwSfjv3PQUesXA\nMhFJ/C8OjjrUIHOyfZNPUQWEvfnUyPN85ietfZjnV/ABpa38vqRGdmdiaIp7\n+MmHnFKDYijspCrXGaCiBFVKHr16k8AiL7oryxdg/EOu3ZJ1h839FmNP9hnC\nc+B/r5iv9IbpHe+4/OjgUS6b+wk44zX9kb7NhmSIy1nU51X56LYuzJQL6ivX\nby/cbrs5mAYCspXq09KEJn1tPOp6ECEOo3Ay3J0bOQ2Iu+n7hGJyACHhGoNE\ng+f4\r\n=7biy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHjacGu0WDbrjNtvz9AF+fmZbKlVvvcUvEDFzmd5RJ3fAiAWyhdodhb3BCljyS94FHcQCNmTKis1HRdSyhD8BUXD4A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.ea889c69.0_1628016441723_0.5386745041024297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21918905.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.21918905.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.cc5377458.0","@material/mwc-base":"0.23.0-canary.21918905.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.cc5377458.0"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I8hImjgL4tgzrnk2hNSKceWjXRn2K6ZxqV6TxI5BJMnXlml5OmoIM9KkobkWVtSTbFf8Lg6hfOpk5Btz7n1h5A==","shasum":"7301403d06dd85b966e2db199658edcf04e3d7ee","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.21918905.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbGZCRA9TVsSAnZWagAAF54P/0b7AyCWW4soc8xyYwqc\nA+VhFWbOUrCjNxQq1uOryPiau2trdW81vrih5XYguTA09sn+/KXDQnUc1ies\n8E+9G3FUE4d3OWGpBrg7bxTHoLfQtEd6/O0tmoCYsqLLlZgRKjkSwF+wU23O\n0qludMAClfSgcknDNI5GX7bVZaCZIkOhXxvYhYzEVECJbVB7bC00C6czx+V8\n87ohrw4drfDnBUTgY3fUtHsQkc5Lp0quR+XZ9XCon2aTJ5d1Q2JneJ8oIP8n\nPYPY0AyFx2/Wou/mvTA+vkGyyirkVlQIJYt1H2l2WYoEad6jf7u+3fARMR7A\nuscvLXoofsblhXSklfcWe6QMaPZsl410za3Fa/hp3XybTpOlebDOnc5x535+\nlezsnedtop0WEAjMWSR6aoSA3RoMY7CjRyP+Q3dn/mYT1TbconeYGn1PKkTp\ncv+6W0TJnchc9T+wvfiHZcvx5gQ/JrQPYa5Tbt8Cp7ogGtrHoG6UqtNJZ2O1\nCkikSTE1qphJ02RYuXsNsCf84Q4MA+CqDi8QHNRh3f/Reg+bZcy+ejg7h67/\nQZ9b3wV5dkN4ht9W9Uks2VVq8jH5pEvJRuJKqtgLKxluGdhXWU4+5h7TVj8D\nVfnp09KBJI8Lw1YeljdrhrRF1UcaESh/fsqudkzBjVR3W7nEzCTCuRJ8iyGC\nGT6V\r\n=cI2z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCc/LUl2/7OwAj4sqoWGflsucc1zPYKvoLFHbOI1Fv2rAIgMU5hx+Vv+pzaDQveANb2tXSs2TLuZbPQBcgapWI2NeE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.21918905.0_1628025241042_0.304040438890532"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.193c87be.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.193c87be.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.7c96e6b98.0","@material/mwc-base":"0.23.0-canary.193c87be.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.7c96e6b98.0"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BE/Ss/XyMlgx7IZHGb9KIeN7f35ARuT/dFXZDPf62rvRiVNHB0HgVXrRUHcPd+hqcoUfeIaDJHx9rZeaaRci4Q==","shasum":"76474de0ae854a55ae28a20cdfde4c2c2af25c64","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.193c87be.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCtdOCRA9TVsSAnZWagAAvIEP+wfihNu42K+Ppu6BaDfa\nYgH3iGTx/CcyQVxCR45/atACxtklvCgPEDRqf9CSd012ApMu5oLHtTHdg90v\nul0B3xzcfucZ+FejhRaivcdMWxIVGB7thANeIpdb23zpHLLsvyy1QsFI+Pld\n7ObWi/3WJeMIHdF5j/BZ87I7FXLT+cLz3pFhuymkiHJAiTLBMd+QMqX1qph0\nhNuE1LwQzLiS+iKMWwtmm6v8qtlrSOkGn8EMMaTT0l39u51VJnuUKSNbqm3f\nyNhjUmbEUrQf3hCngRHnbKHm7TNCwc7MP2mDwgJLILK2fZcQ7JytnhBDUHt/\nd0ENyeQfUD4Jl/jf3L0nMqucQV66k1qPEfPylWlPvb6BcNqpG8bn5mlHYT1e\nBS3740Ky6ztNg39m48fgm6KE6G1o3mNR+lop2yISZaf5SnyqB6/1A41qUtsD\nticus6Vv5FcZEB9WrLy78AO+c7sdx2rmpbc06X1dFwsgJykdpsRIm/+OUpKS\nT+Pdf+jyPs8T9EVzKb5oProwswlm4Cd+7NMSRdfhRwUmsglZfzTeCAp1Lrag\nOtzkbiB/N8Gm/FpwOv5BfLgpMKhV9ADT8BBG6+myXkLJiQVz/LsYhUScBhgS\neP7kUMjYX7SscGCjGd0xOOT3KseDcK7a51Gfs665kMP5WRyoVzxMK3GHc3pZ\nX8em\r\n=J9VM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQ42uUSXXSUnqNhR1MTeM3bzBTQC7Ww3KYxdN6nbGJjAIgGeYcXhqUTkxU2ukSsSfYKuOqBoBn7VGY8TYoNO5LKS8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.193c87be.0_1628100430444_0.8616768078296748"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6fc52d8b.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.6fc52d8b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.3dd611091.0","@material/mwc-base":"0.23.0-canary.6fc52d8b.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.3dd611091.0"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ll47QYFAU8yj/TzIS8+hvRdf35QXFTzJ3rvnOQjgKiY+m7k2r6M0avO2jvsPsKYlPjWvtNanqihN0SqKYXocPA==","shasum":"cd1c0f13e99e2defcce228df45b74c6dfd5f2e24","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.6fc52d8b.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCmUCRA9TVsSAnZWagAAXFcP/0TEI2Uq0aj2kxKZL9wW\naBJFSuFv6TnR4GvZ29B7AbE9PxGLDCwBH+YP6SmrbXVNi+wVocXb0tsrmsr5\nGAQJoRFSByrexw1w0GDgLaVyJwL2HdFxMahIJA7r11uw7dbTj69S4A0A8bqy\novtZS71y6nwwdAAt+Rmac4pqhfIOYABdDN/naAmeo7RT4Zbpc8aOhp1VXPaX\nnMPOQEYkfk60xIdLRWLc9ScAgDVUSqJmV2IxuI0iwd7zLCM/6S4YXE/Z32R4\nblxOai6elf3A6N64tYHmFJxDwZ2+bzOiFgCpvZ+d7H7W63+T13C782QfGkyv\nRmWXAgi9ptEdHJHCHt46IK4Bnx2W7z4vis9XyIIRz3qCVQcjkZC/IpwTQT8t\nWiKPd2bym08xiXyQUITd0EZtXc7Uj6Ipq2ML6LVpjoDDBotQgb0grGfTjKHH\nHpHMDaU+ZlUOQ9+nICgfH0id/wesTUK7o/7mMcFd10SBRzoOFxiG0lJI6B9z\nglQGZZNv7II1qGt8b0Va0mOLuuBOY+kUX72SAPE3zz5sQM8VW24lzln6zWQu\nqBJx7NvvxI1xL+rLEj0hq/d2PpD46LnLADb5cLq6sCBHV81fTtAZYI4BLz2p\n8KofLa43mpWgbxAZKZs5AefEV6//j6NPuJB8zhKMvvzNNPrRsnw38G4Bz7NV\nOuK6\r\n=qkrc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFpgEredCIVlYdP67xFssUAd078Ay0crbuPHdUCKfqnwAiEAgpkXApkmUAAGTSyBhNnzH7j2uh8VxYtlKgf114NgpR4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.6fc52d8b.0_1628187028086_0.12868217669000326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e2e9777d.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.e2e9777d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.e2e9777d.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WE3gxsawmLiITl+1FZbr1JBoSp2aXsGQ7JOaRtCwzATKv/whMp0vfXcms4fHs7eRCWjJDh2ksQN+9KkEugz6og==","shasum":"ffdb278ffefca4ef864045048f7908e71a35e437","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.e2e9777d.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGplCRA9TVsSAnZWagAAOwQP/3gMYtJQXs7JZpFuk7Rb\nFJlzUEKaVXK2scSLNx4ZNuoUidN0ZdxjM+TwHosRJl9Z663VjrRbMajV/14c\nC+T+GocVp/Cc+C4ypLeiny1CgzJyIZ35k+dS3Ts3y2fk+QF/zXoRz8XrMnhJ\n3hFOZ3dvK4fwNZYYzItcnzssCZa/b8mVBcOc3soCnDgSnfEDWbZoaS24/bgY\n309xotQoHq8inZh0s8mKK7njG1HWCGK6eIlODpMR443hu1L/tQuLshpxhak0\nUMENuF0d9W8QZ0hDl/NqYsjPm+av182J5RdVRvJlYsKaXs8efHO65wLpwQ/V\n0EIUZugM3I7rRiemsXi+wZl+So64xlxxwEZoR4FFlOcMdOKRruAxAbDYaMNn\nsayXycsa6c/lcFzixSZrogjVQwEC0BKKPSVIND65pC5IRKyFeWrSgFVc7nbg\ns0bkIoiiW9a802YXT+ymRKxDhISmEB3jK1Kqj+msNXBPmzQCGEdTri2es3K3\nkk++YE248byVHfiaoDB3Vh18Bh9B64aaAJxDZhO7zbqsgurtsmneVvFQbtbV\n4Oqva3//EzPuVeGiOb0vJY7LgX6oxqaIXsWPx/ojBCD0Oy+rAssKKPAk3Tf+\nXDg5Q0eZ+ULTVrREr/dktoW3KXy+r9Bsq8pKS/GnwByhlBRgxqS7FcHVKdBr\nCE6r\r\n=tsdu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFNyLj3QnEOPJx1Nt6CYam5XfPIdskGLe7u1XzmYHjG4AiEArYKayri811m9o8kHdRp5YG248WTUDpV5zW5Bw2Rx0dQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.e2e9777d.0_1628203621194_0.18159426516015809"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.72ff1e68.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.72ff1e68.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.72ff1e68.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3gMYNNz/K6Du32uRE8SbnGoHKVsQKhTc+U7PeW0PhQQz7ITyivwcFBU27JtwOOTms5XLSt+3LVdgF80Sc0CKNQ==","shasum":"2375fe1c1984d7d9b9b5133d2806a55835933b0c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.72ff1e68.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaAYCRA9TVsSAnZWagAAilcP/1Kw1lKMatMEU9YcUGB2\nrxq44Dw2v6heEOsDWTL93ujwyhtVfuZMoDwg0qLwN/VDSDh+fA8RIMa6FYdW\ntNRrQbzyBzC0DjXx5rANqqg0hV+6onb8lpbbE9sfJszi5LGs86/fEyF/Q+K3\nCbMQcjmy815at9oFZTnPAtsdBFLzpzoJ/nBm4Xp/7MLlKmcKlQhf860BMk+G\nefnFhSCRtCUZIegGqzJG4wbo3We1y+Qrn1M73uBeqjuhqULdWAAnvPvF/cm0\niAwSQurnI3v04uZsxOKRDgsSnhvmRQwfzPqt/BZmgf+p410TOfBbi5/EdFoR\nMFXsafDGjbwzloLbX267opgIyfixmqHNx/qhaPOSRhEBxRpoav9+vgVpTa2z\nIwFRBaFvSZ9K0ALIcetWHWW/awQwD8PqyyZmP/yo42RSqG2AScjpYAlM9Xmq\nhKL0AT7Dhe5ilvyIliWj97br9K9NrjDLL3l/GSxc4GbGpgysfR7uFfstYLYb\n2x1OXv/HeXOo4mmiEg1hmjJJxt6j4zldoFxmqz3nfCd6zXDkeaXf3dE2pU3T\nHQOnlz3cr+dUlYq9qwfMHuoyWMQexvspmJevNkGqwnOCAbvEtzMlVw6Pvg1l\ndHM/f7IZShxOLNvbEYgkjTc0Ex0rKyHF9W+WsE3NTTkbS60npQtcvYVDzQHA\nCvrr\r\n=VmnK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBOZSls5WoJdaGNiWMRVh4lbjOObSRaQXLRD4Pk3Ixy0AiBtjp5ROXtbUGisaGF7Ayfys+QrWteq2GhmQJpnSrYkMg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.72ff1e68.0_1628282904573_0.07680262005575345"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c527e93b.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.c527e93b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.c527e93b.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8Gqtf08KAZhc1Gl23Av3hDQ9Vo3vuClJSIhOYuPB/OLdSG75ueVo5oQQt0evTnVIUhgBvnAdY/6xe6lI8nKJgA==","shasum":"803cb95550942ca6c85b174ca1da11f2a6446a79","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.c527e93b.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaUoCRA9TVsSAnZWagAAtg4QAKHuZjYfwdYAYeiOzfl/\nop0ORQ1ut+RkeYOmfoXI+oM7upFPXtnj4yyAFd8bXUgY4VMt+bd8Gxt20x/y\n0XAKkWVzR0h1moJgeGZdkRcb5FN4YJB8jEgsHNUcSGZZGKxLWv35t9BQqlWv\njQOL/LwjfMbHNHFNOgRyUKIsOqC/g5qqYPDVomIb4sV9uLksnJJgUMzhTkKr\nwfX5urwK7hJIsOmnFmSGP1dEjysVZckzPEtCXYGfJDYIcLe/atm1HX5duMXK\nF38/CdrKdBHk77/Reo3472T9mA23eSRjk5bG18j4kzUZEY6kWrR9dRpINEMl\nHD3XnI2ahclfRRv+p6OYCcoylLjF5fAXAs4AdgMLeM+0Qpz3e0FYVQlKjhgY\nGZJqQo01JaHVYwgk83ZHY++iFE0Gc1whUO6WriUTuysCbjKt8hnu7sxiDHJg\n97kpzFXWvZdPQs+i1Q90IyIQgUeV2dIxB80XIpvIvi5oM9s5HF7cjrAGrPpP\nqIEkL5zKphVZtwllvk6/izOiD8p74/EJjyfMpQAM7AzhxNeBG0mwD6N40N11\nNOetR08yTx6xoMt2/fN9p7OxsUQccxPTQQjY+1ltSnseJ1665ZYSOO/p4sOl\noYy0iPex3uGovWabpCrnTLZy2STgLVPafEEi1Ef8txE5mDF00/TOG70sDM1d\nGgzT\r\n=OqgT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAv5OI40Om1G95dfP/IyT27nKiVipCQXx5HW2OKv+wcbAiEAhgYlgxSRrud/99Ld2NyogieAiQTrfhgzQUPgipKQct8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.c527e93b.0_1628284200609_0.8870938810109115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78b1eaac.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.78b1eaac.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.78b1eaac.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lsTBvnywbFtzaB+ZSmGKZvjoIKiIN/ZwJrEEjL/NerOmJe1mY/rMHIYSpNygXfKFbphJiAtrb97t1CXjjUVqhA==","shasum":"5f33486a8012ee804b434bb273f4c525b3dd6dbc","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.78b1eaac.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW3tCRA9TVsSAnZWagAAyT8P/A4YT3kVutoPmv4aWnDI\nVqgly/lcpfoE5u5m8HwbUTMEyd7wFYp1tHariNKUGBueJrmsjIg6B3Fu0mAI\nZxTMELOLE5u//djkaSnY3G2+wNOj4g+ZyviNCy9DoLSCyvksn/xDLQY6/5Z0\numiFb1vDE5j0al9suO7b7se2/QmRTzXT6lx9xuL+GsEk7HBj4uwlcTRHW6ir\ntW8MW86Ub8pTiRMpHicHgD+Jbj3FooB8ochRT0EGrG2eJJJvsIDMMj0qr8EU\nchaL2ttnQvFPupa4JbkdT6WN4rRiqqW4he+JlqB1GjvoZjhuzNtNj/X8H9/n\nUna3vJg3dsXCs+Lww9sXzo+j4B62xQ+VO5mTwMDVHoq4C3woaLsaHO1LjV1r\nYkDBziAuILiRErhzHBn8Rd5zFAiUL4LBFKbrMPxoAq19CNI9YuuyG0U++Iee\n4Ahay7NuNJigkR5rzHBbPnfcI3EmpPUvg1SOjAWExHl4wd/QgAv3Da0fcmqe\nO3a8eXZX5VviS3Xg+gQAm5KPf8v1j49H45nNnOpM6eT6xhxUKx31E0Kxua3X\ngH1jWIH+fo0LWAUyZFPX4RYmv65Jk0/Xwb1uxxpGoSXigxdPgIlydRj00aFQ\n7p01/h80hFzQmpl+TAm3qYN5/2shpdUFwb/wy82epfGIpATs69xefIIBrv7U\nMhOl\r\n=Mg+9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCATuiJPbh/EuzMBefXCDdNMbNsm0MNRx9db8wqO4zXcwIgTc4YI21HGx1jtQXk9MzuWhSDkwujWiuVq/X7F3QM8Ls="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.78b1eaac.0_1628532204852_0.7841749333398791"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8a4ddc9.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.a8a4ddc9.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.7249a3060.0","@material/mwc-base":"0.23.0-canary.a8a4ddc9.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.7249a3060.0"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3zaUjWQBtZL+miE/HT8ADNT2/06Ot11jrDvdkO224awdM6QdnmIMmfqFr3x36Aoi2aLkiE5fuKc6FD7roe1cUg==","shasum":"528d18d08dbfd7735b821de34414ec8312f58480","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsmJCRA9TVsSAnZWagAASb0P/0z9ez6cDt13eLWsrDj7\nmU6NVT+U7cRrQxZyFMjX+JzfZPe0sHbvVfylDRBq8jRKPBncnU+4vNHhWWEd\nvSxfDaCbRRTADrh/R8ruvfxHQI/BFFEMuXGm0tuDDNa33O/S/sDLw42Uljzl\n9Q9aB7Dt51CNTWgp1svDIAf4x7g1Ae7lsd6MYVutHDWpCqCKvV9JRCuZrJK0\nhUL5wiFjIq5PvzC6RBMeLtq8a/YjLBRxi98NXxOhdrPVrSualYWQjXPLb+XF\nXOPT3tM3Qj+wrBiqhiy/8dMjzUL8dkyxFOWg1JutEcCMQJINIj6T0FkxzSFy\nkavnf9Iz5OYLhWkMgGjvp6TSFk70+SQqFjKwQpahmWwN/sik9LqjHz8xR/RQ\nX/m1soFjsBFOkSLOTusAFEliZ9WbGvXxScyJiRFHNEgmvnm5AEA2Pro2ozoV\nn4fyVQ2w+dD38NudjuselkkOojOz/Fzgo2/xW+GwwdWDjNtTmkov7BDYs8nc\nJFVviceWUASasUerSTNFheEudSe07HGUL2BWq5h1yCUn/YJT/18LThsqVIT9\nBP3xVuQRMgIUtpbw3kqeSngVc2xRJ8xEEr8Fq3Yk+79uiOnnben7eJRoVjdz\nfGrWqUD/66ny4Xqjx1/Uy4gl6Qv0fiy0Lii2GcRZCU0wrRx26GqMGlMfxCcU\n0gkH\r\n=txMC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFkmtzsEznPTa6n7MXX1Pv/obEQ+Roi9/0b207xi8INnAiBpNuFBBBeNJNR7srB4OSImc8DVXEo4Hgi3HXUPjyIv6g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.a8a4ddc9.0_1628621193521_0.5854548272420959"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.99fc0632.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.99fc0632.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.f4241a42a.0","@material/mwc-base":"0.23.0-canary.99fc0632.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.f4241a42a.0"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-j1e/4WLpcHTuxekEtyCu8AXKSGteb9YDursNT1HsGzLtacaTo41aQAVLtWI2xT/ORuIsnHrK5xOhdwAhakiB2A==","shasum":"029867b5c1eea843073ae7fe78bc881b4a9b3ba6","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.99fc0632.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE1cCRA9TVsSAnZWagAAVWUP+gOEna8jc6vTgv7aRzsE\nWtPkASU8o92PGUHwTE1Qn3vMDIx6tA1T4Os0lLb2HN0t6iGBomnnJlxnifO+\nqts8YT7yHJcF4iD/8w8CCR+uqhWfLh/pDXHUOzUuOTnYNRveNwo0zeCpihjz\nGqTEFB604gYhpxFmdS0CnxYaX2LmiHkHP6Xp5crdbUoNTvNOAKpPXA7DTwIA\n48L73ysL+dqOw0azlvE7EOMx7jitWsMZULPX6eK9Jwt1HaelEZfn5lbVExl1\nBMeAB9RjjHI9dfpM6Z6nA1IKGvCT6C6+3HfGGv9mvpp6J8mDuV7CGWVI75MD\nvCNFiJ4ynki2zNsXGeolObwLsqXY53mlqwclYSeIX2MZJ8v/uWxAEvrnuHqn\nykebleMATX3mwJe+MGdHfxXeZq4G51GnS4QJZhMXGXEseicIaeKlaKwV/yY9\nP4oTI3b3SWaOnaajbhcxBzvKhso4TlcbMIscUxvz8FCFebivwQFKT2BIoIWE\ngiWuIafWpaPRpS3z/xjFK0KO8ZGCK3wUCyAfJOMqSI/9PrFZVBBYdzUvqghB\nt+iw3RlYXUlr6/99N46S9N1e3AGe+GTerCz+GOZtNnJTZzMdo1+1JhH25rMy\nivi0Pdjn0m44Qpyo3d9m35TKw4vQrME7IW2Zf6EBWzSljpQgdwEaSu4lomF0\nBFc8\r\n=QLqg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGnBhZz11Wtk7npJDB9vm0JChbpFwTKINDaKOMwgMVI2AiEAvD3eymdnZipI0djv8x4T3rAzSo5r/2GZTRMyMIfe18Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.99fc0632.0_1628720476070_0.39043966658689144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3f47ae57.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.3f47ae57.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.0ad12ed3c.0","@material/mwc-base":"0.23.0-canary.3f47ae57.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.0ad12ed3c.0"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tAH/8nvZ30jo/W8mibK9HfHksIwsv8LbV2PDKwDPudhHcB70QdKu64MHmNqbsc4TJiSgtgp/7+XTSFWcetxH/g==","shasum":"7b53939f522b5a40ed12860c472375ea659bd3bd","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.3f47ae57.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWGJCRA9TVsSAnZWagAA0ykP/1c+6InY8Rvieb1GB3UG\n8wc9vCXy8K451hA1ZwmZeWhUeNEeESkmBhFMkj6+948LK19K8H25Z/ZCG8i6\ngUNPIi29jXw5JUZUCpLHjmnCnzYgHdCRHcGJXKtRMaU2FMMi3GHxzrPxxZPC\nGZ0v6CtsqwRKAzq1Q7xKDhuTGOgxsv7zuII49oLv/uQZkl2PdH8ploxv0f6g\nHU1BvQClkkp7hiIjHBBj0AUXAp2XJHuMZZV8QY8IyYfYCCyRrhx5thzC5YfV\n9Zf/5jhK2akPw7vMlVOk8WHmK5jjbyDSdlkgNmApBtgrNRvyVlvagclqXDKg\nXMakmhobYkUjTl+CBrAM/UrV69paSGQrv0VNh9y1RlCCuwWKp3uxf1KCuY1A\n99yMDAjOwz0bVCMfxL9W+BnCfqqShPQm1mHqrZXG7W6tIO8KJN66kyGMvAEN\neEpmI4m64Q8FlCfgwQ6gNtU1MjorfV8iAm3w6iX1eYpgGTDt61V/RewHu4FL\nUYKl3aHBH/xpVuxw/FK63YTuOmwWF5AjcHMhy4Fa9JQeP1SNp88M/+LuuFEw\nvMxjapwxiiBLt1SgsC3yI+f1VRNnRu5dReoS6L8+UeTq4p0mq7EZZIdiYexI\n5yhWgsZYOXmqyfUz26kv5SMHIyMgeM0DM6yvW45dcJfpbls+mxvfKwVheeL8\nkiGt\r\n=3OEb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHSQpRS8zwnGwsxTXocmnFC/78lrtIfBBtDrmPzhDRi+AiB/1tQYP4cZVXjZFVK+2d2dNdy/iKmjKohITuD+TId/VA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.3f47ae57.0_1628791177668_0.39148891791507845"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6b9bfc32.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.6b9bfc32.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.077dcfcfe.0","@material/mwc-base":"0.23.0-canary.6b9bfc32.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.077dcfcfe.0"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nFpSTzVhbxeX+YvGNQ+Q61wpmQOb+QZyx2IGU0CDpcq5eyEhApjJiF3Cl53AxJ43iOyYvK5jY63nGxQ076P+Ag==","shasum":"6d2f7d32391e677f51d413a76de4bd707fa95a19","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.6b9bfc32.0.tgz","fileCount":13,"unpackedSize":54313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWc1CRA9TVsSAnZWagAAcbMP/AqlPeYzNCE4PS8OfUOZ\nOcTzm6mfaxeGDkPleS5KxTAXuYcuSOrZPw3YsxMnqd4NzzqN+c0laSH6gK55\nBlNg2/Xy4dcsPKUewUChoz+CMbiloYW4dxp7LdKT2olPYZgpaimeb+w8qMiB\nY4fuMoClp/CEFG3LT8TN5VZFj8KpI1QdfLVCLc9UcN8xjwyRvNErMp2GrmAb\nKhkKRCtqD5cHZy94agRZKZ6S1gXSwk8cxQnaPWz0lVhFuTHOyApICIzaRHGi\nCuUkZuk50v9fKQKnvkaAh6mHt4S70sqATgp3YqEK6jUQCflAGL4RFcVOWOMc\n5zDZPFFtvliWjFg8xP6Aa0lqi07tCKUV7ebK+FLI4plz5oRPfR14RWhhflyj\n398Xu70ANziucPjw+crTjf7+3zCP6ioe/AMNTNCS/ksuhmkEIHP007r8gpWC\naicruyABVL5cBDuNNH3HOBxLibKTuLPj0Uw7GkF62QD73zARWuB0HO23oJJV\n+oMhrgGbVlEWvcOLpJ+0cy9mfBWmext40m+ki44jtrE0/tdsFuMpD5XK5bTK\n2LW2/MYTbL0elfIZVeUM/6jMtpad9wPqFTFiEnMD+wvSpAYkUnGz3yiRvBUi\nftN8efCC4HPREGxgRNnadqwu1Ulrfksd3KhPy3v6PakgAmlx2B2YjTTrO+vL\nZdhL\r\n=gW8c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMOW36bwMAC4iUD1abaxoMFv4i7x4zlwnozfNJK7/ziAiAu9SWAVeRDKViPjLUUb6V2jDG+xbVpa6+PXgGs7QClXA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.6b9bfc32.0_1628792628938_0.6429536125046209"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c89ecc63.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.c89ecc63.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.2fb068fb0.0","@material/mwc-base":"0.23.0-canary.c89ecc63.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.2fb068fb0.0"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZawkWhb/hfWPj15zZHNVgjIaeqXIsFrQq8ZQ0ltk3lP+3G5PYHDX9kkfWCAnolDEFqkWJiBQEtbCk+hDOytx1g==","shasum":"49aaa96d429dcdc49f7807e53159c814a3d7bee1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.c89ecc63.0.tgz","fileCount":13,"unpackedSize":54291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp1yCRA9TVsSAnZWagAAjrEP/2aORhVtreRoPeyERq/2\ngSSzUygsUzKx6p9pBI2vrBHWkTlkPYJteEZZN0TvWtgF4LdD7aoc8N3/k6cj\nx2sY6kpLhRc6dREC22Ws8f0+ef4v5UzjVqyaRQDIpdO6Mv17z70w3U/iPTxI\n0XWptPhyrfl7xNiggLBzU8GnWz8hWLisK9d/PkIUArwCJJeWEu0P96QNxaGv\nTrjIS5on65olTTgnWrG7vy15aKcfRxaNDP6BRAnJEtQFtV7+GfkhCg3sKrYA\n23XitppbPlGk0dVAHXBoj42sZKi58xRhAicGL3TQgemGc4vzERdQXvnk2VyH\ng/hEHOvlMPcRrFCpQjffPrYLbn0FSI9mJgHMsF6uG+Cu1ZUswE4wd0882YSv\nn9a0zo+mgosLnp32cfH2jWPYCtwWE7ELWtFfa6CSMWJ2YVLCXwnlDPiNNZ8S\nOeSvuJuDCq/dSwlS8u8hD8mruHDYa3OkEHNCTtHm38pVGs2jyBWuZYzVl8iC\nvLTQ7rdJavSebbRSuaZmQIypbcAroOgrF/trgV0mYox9zgllvspv2+q4Ir8r\nlsvFXcqN7owuELQt7HIxSc8c4N5pEuvrQki2TJekbxiCkagGTRn/fZZWyGJK\n1OV33XKHObfL5581pZXbjhFdneKvUmJrEHLe16LtxtAYZ5EljfI50XtZKmp8\nn32k\r\n=UjzY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpx1QGvDzzLW0nq6TL6zvx7Ej6DFzfOX1A3j3rtPtZfAIgOdI6W8Q4057CGzuMJbO59ZW7GpHX2xu6BRSKxk7WlWo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.c89ecc63.0_1629134194159_0.49953161426274084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.59de86bd.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.59de86bd.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.457d89aad.0","@material/mwc-base":"0.23.0-canary.59de86bd.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.457d89aad.0"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qhuc33pQ/2O++Msaz7b/L6lmWSmVvqFEH/G0QgsOqdy7nDKhS1bvbjl2yQ45NBN1QHRByyx7mvzOlYA9UrFzdA==","shasum":"d40a39e8bcf6b6108c8e9c5f296fd3f6e7b679bc","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.59de86bd.0.tgz","fileCount":13,"unpackedSize":54291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGR1CRA9TVsSAnZWagAAz4cQAJkkB3aXWRE4yVWPvvRM\navmLz5qLdhCnY6PXYqNJGNFeBrmiBGLSTeCyQhWsbARUMD9J3JY1rFq/guKK\nADYq/rM9bSlQ7E/CSTlwBrakGFKyJfnqBI+9ENJR00BLu5qQzqFP+8a9lM8o\n/YZyu6VohHkQ1ldy6ob8eqewXK1mIq/uumZdd/pCCDNnJNXce4UIFqOx1Vur\nNIXOLbDnSoGR7eH8gcAzy9wqeDtnoHdrmTVp8T8wScPyhb88f1hWjui3t4Dp\n8Fa059yasxor6Axz9Cl0Hzn/RHhNHairjAm6zfj8EyQL/3o64GGhT4/pq/Bz\nca1ur3zTzEQ/GQCYiBjXO8zHW7kjalrriSs979m0aWr2sz6P0IF7izs0iAgX\nA4Lae7CvH1wVXvdOD2DVglAZhU+AoWB4W3P73k9sSA6ncmgVf+8n9LuWKJND\nJPh8SM06lkBQ2SX9ZnmQZduVXUEWgHQb7LImUbCn+VOatERw/1dQ9t61oQvX\nt3zW0zHmScpWqaTbQGQKeiBDdoQ8HXgPa4XlQfMQatGlIFHMa95k/qwcgFDZ\n7STcZAiwqeeaDBOzVrbAIDume6u9DbStOhxue9TWgkV1nDwgH3A9KpZN19GZ\nwwcy/elrXELqZfBO2YdBj7QGqK1BBvjnoqfL8O27LOHwXL6NL/jrklxRZC5K\nnYK9\r\n=t+o0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFlnK3HOUgfVsKX2CkJitGz0GAz6MFXFOJUTOQNU6OOKAiB0mA05BsfU7ElY4AtMHbVnuBdFsaHGaYw0e7tg4RM7cg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.59de86bd.0_1629250677637_0.22813515063287837"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dcda879b.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.dcda879b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.dcda879b.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8NSMWgvEyggEeG2Ww45fBIEqlaAWqOStV2sIEbOYCrlgnjm13hO/KY2wO/U1dzuiy3fIq9gjaTpY78iq9psHGg==","shasum":"f3411532e61a1dfa3e8ec1e3c3b7c08851a88220","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.dcda879b.0.tgz","fileCount":13,"unpackedSize":54291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYg+CRA9TVsSAnZWagAAV/QP/08NQJZazaMW/vSjyL/N\ngEEXLV3J+TVYxVw6MI2WxtdJcy05CsVsKGB0o/QghozlhyQg2CfPH57bmKjk\nfxy2oEIlqcfWhs3zO7NTgxZx0LApJIsp/VzpilibEJvlx6tgVMt+yXAkoBSV\nar6IWo8JtA1n6AC5Ixk8gDoeF2RSnzbkOD+oNy0amkHpnlSF+BcvCbIF9bpb\nW31dwMtuSdDVTPxU1RFmZiCSPmm9NFR1LeSho6hb2dU1p2Qn5OGWiVW98C78\nVKxHCP60iAqU6GG5gMhqBBgSiBCIplMvEn1I7QBTK241TLUJgykrb/1ipv34\nqUDHYnnndF43+qX6g5ubwxLh0WQwkJvENqyzL9mn2B/Ktts/d4kAl8bOo89Y\n91kfl5IffRf0P7ui57uTfjd2rp95Um7OKzslXbePlM/RW3lvLZWScOa8CFIR\nMm2UH1veSZ0IPDP/YBb4Rdci75rQtUoQWENL6WM7E+XfpVO4pN1j3uYqZvLr\n1osPb8tqhFHW/fQ5c5pMdAOi4IyzQouyUKNOhPGBL9ayxzfpTUPJyGGb7oRM\nK19NtZ4h2Y0R6qYR1eTkqdgt/MYpSNJJnv1zDVs2srqTLkXQkgzIDi/tMnje\nxyK9KvNpphXp0or0u96pKqSF9QicYtObEiR5Qvjt61crefbjJPjhSDa+CReI\ncEZU\r\n=rUkL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAVm63RRzulaE1nElutUjBnYFCS/HH4HwAtHwfHA1zyiAiEAo1TFGZY2L04FPVa32YoLitrUBvBf/jVBxRvSlyzhek8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.dcda879b.0_1629325374555_0.33162488367170573"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dbb8b366.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.dbb8b366.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.dbb8b366.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-If5WTazP0DsaEzGBa4xN79r6gDrb2QQ74Dk+7ksMFe/CtpnjWNWTeK/2QHYoT758eJW0taVi/aahceM1bJslqg==","shasum":"a8d02ae049add823612e350bf1d12869da40f941","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.dbb8b366.0.tgz","fileCount":13,"unpackedSize":54269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuJuCRA9TVsSAnZWagAAGsEP/0vsOXu2e9e7VKi71w0N\nw/HvxVQ8lL2bK3SFBKCNutHPz1ObrPSmxAHZGplvr9ZRec1KE9I4U4j5+7Mb\nHw0OCneZoowdNHWzqwLtKau7NOYbwctmioB1wBZidKKE52nagS7zX1oINiTZ\nUpnK9cy4qD6jlrh3ZeT1kAGwnzSI2BYmCzbinchyhnFmViCf+Qby9FgEX1gg\n1s/4lz83hXu/iJFVKkxRhGgEGuP6FBVUdzGrqg9o3tNA9w5kzoAZfz2Rc9IY\nd9iwJoWWxMZbzzwwlXq3w5NPn2yUfeTQexkBxmorHc12SlXcX720K3CjcqcQ\ngl3F3coEvo94bc0fnT2e7RdlMl1Epc3nLZmyMY6LXw8BvDskYgsUrNNsRuBY\n1l5+qOiDKFsHNaeutez+YZeP2NuLZbIQcE3E+vZhvemsyGoMYJuoK7p9UFkP\nwB1cf7pExfWzDShfR7UadSoDmKJLzBLQ9lo7/ZvlXAWDqhaeeNKpf4HHz5BR\nyF7sQ+qq4v+S+YX07NwqEPNC0prRQJPeT/pFEjoGUGZpr/JXK2YvYDuAPuYm\nXGbJk9MlFgd6S1PTvCt4mowbrK20NfQpFQS15DMtb2DlxXc2jD9do4p7XOCQ\niNNH+QEHpfdu4QCXumXJ9pFPw0g5n6VsfcmI1k3IGjj1Z35cSvMSIb2hgeTD\nU5Ye\r\n=hUjJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE86tbl+mGcA6BxCffUqnJZMyESS30vvsLq0NDiUlIhUAiEAjP8BPOWNy/7bkhjyE3tPM8piQWLkKeVYpwsbmpAhZ8g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.dbb8b366.0_1629413998378_0.029110939014457937"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c6e3060c.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.c6e3060c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.c6e3060c.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-USeqmC0lYIE3PNc+EGmdmcKcSlQPLhSDAKa4aKLgiuGS6gq2CGSC/8qxeitkynuHS8gxtNNK0gFnEVvs5VNFpg==","shasum":"df4b7ac825c8a1aa02f8419e4ac3e2ad5a2f0876","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.c6e3060c.0.tgz","fileCount":13,"unpackedSize":54269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuLeCRA9TVsSAnZWagAAUQQQAImlVjro2GYRl/scg3Pl\nXBJ/wA4zDnHmI6/k4J0qYp3TmpkrkWAgcvrp8+XRaGVEl9O4vLNGEMIe9Aai\nsBsH/CSAhp6sHev4jXikLcgik+6uGA2+cJXYrOi6hx8B13InGaMC6nh3BJbO\nMcqWxV1i3tIo75if4Tm3rXk/9aMuKEGBB0iBYHh1atK++6qFSC+5Slg2TxRE\nb32PuJcY8GR6jCBjjFhYnIarc7UjnjNyld5jSx7RqkiiBLMWHm3+lGuWQ8wb\n+ykrggApti47V/2HXWgyuc0oCAsgZQDIw5F+ktPiLq5MkTzL91+YTkk+Y4Di\ndgx79yBvfwjxkbwAkaq118qL/pmAWZFvc2qltHZ7peobLOn7sdZhmBUqzfKo\ncdV4Qw0BD0wAh13b8XC6+tltZBZc2tIDxAKpbGuYSvIiFZvWKd//dNwg9ol9\nLHaCx/bBWasvMt4fBiLrbwz8Ckjf/5OVD8ka89kxXujxiwmwC4hJneO6LRdF\nWWI6Gar7odHYQl8DyckKO8pcGRnjp7un+pF5iah4SpzERrYKH52M5eoZ6URW\nZp2kTZUHL+ocz2La70KT0/qJWiwHWKjZ+Es8MbfMYOwq3qEDECleNFujipwK\nLu4KCC5sKsiFTwNxTZ3zssC4nfhUQgnY81ljW62C0JKGl1kZqKxN3UpTa0g+\nUgUp\r\n=Ay91\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGLdQWIRS7B+MANkzBypzIptO3LHdhBOJbFpDyYUMjvYAiEA049El1w03ahAivIKh0SLiHd4YNcrlFM7cBChNKNudWw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.c6e3060c.0_1629414110679_0.19981642797846333"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.03120b7d.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.03120b7d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.03120b7d.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WH4M54L+YhzPQ+xUqjta+5hjBCS4rFIAk4PxIkA67CPa/25OSJpWt3hpDUssBQujrKLuoF57D97nQpkt85enlg==","shasum":"00620b406d79cc70bc04545debe72dc4afbf75c5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.03120b7d.0.tgz","fileCount":13,"unpackedSize":54269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHvbLCRA9TVsSAnZWagAAh8cP/1EnDnO2M8qtoCkohSy9\nwoF1pCDTm7EOJ3/i2NCsFJLdz3CbYDPGJwS9TAFBScwY1dlAyCTwjcy7wqNb\nCiTsaJyfgoMgpCltryjANIV4zLy9tRM67gCYjY5z1hz45zRWLutj/TiwySr8\naRahzlQsiArNDglrV83TlTVujUdXRBtlGum/2V2DJRgYORj30PI5yLobvq8P\nKpKXnuXrYuoHc0RIT7EYCcHTKSNb8s09fJbcUH0GlmbdIOXV6KBquLW0oOkh\nPnBUyWGaOkDQJ0afE5nJczGgqnGf9nWQFi1jcfzQgdof6jloAmPYppvNIS5j\nb6GNmaCu3CwxFFo0qtSvFfiYPEEML5ItqSC8ilhgQo7AxNPokfzsctHWOW08\nNgk6Oa9b7fkJ9RozdUHKaKHHHKBF1u/Q/7mRrQXbi6f51RNnCy1d0TJBR84b\nk8/g6+4htKTfSQ/DPnZ1QDFQ2zZHsDX15NfdetMwBn3PAeglyYOvkjfcaB5I\nc5NEjGKmeKWLlGMp94vc9F0iRXWSOg8b6Hd3AKJGd7rAVMhHAxnGt///jSh1\n6wvThCb4IB5oL4F53d+YX72kaXc1gnEBkPDAWIzl3hBW+wiDpBxKBQiFK0pj\nWpgzkjVKBOR5HwbnRlpwtzvtKFunGKR7rSsWuQgvyAExlhd6k2afSHBgwHyp\nz5pa\r\n=JKWG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICOnoRyu9PEvwuulbSnJ9yCsht1fy9y/PwAaJiJQTklBAiEAjAEnfMk605JyYeiWVP9ZLYkJx5U2NLPaM4RlCQ3e5ZA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.03120b7d.0_1629419211496_0.5009970948600573"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d75a5f74.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.d75a5f74.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.d75a5f74.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hUxPsuQllikLT6Eq5Xc8/Gak+Jn97SZZ1TzSzO0jJqbcsEwbkrdxQnRD3wTq5No0Y9+3p+ldDYVTPk91KJZhkA==","shasum":"645acb5c75b2cc5f5e561408777774bfc2820c8d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.d75a5f74.0.tgz","fileCount":13,"unpackedSize":54269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2AICRA9TVsSAnZWagAATGkP/Ra3dJd7d1fAyNCgAR/8\nJLdxIkHMQr875nOGRjIN31h22gE4hw92TS6QgNpgTQhxndto4IG+3tmAXJZS\nNsM1wEuiT4z7wYcwW0L491m6ntg7AIpLMwWA2kaHddRNFidCyxJZFPjF6AGL\nB3blNjlrVNk2wnpQcBAt8jvn2lq9fpJfXuPtTM+pr5r7htMIICJg+GqOFI43\n99+qxvpR0P3uk09dZP/SsfMFMBe0KWEBNJXrRP3QTVRGw8RMZpw/LXhF+vYK\n/Ezd4x4EEJnLH3XIXuXGEWSf7iDLhuU7Kzjq8XaSIdLXiPP3KAVbEK+YBoEQ\ng373kY7jB6xU411X8ABwrL6/Tm6O35o94GjmU3FAUZNXUs5b4vSvpoQJj9Qp\nJ5gdVjzm6KaS6zy+IQYvcr/O2oVTn3COegP+KAA8cHRdMMb2NYY0VybSg9Vh\nYUScX3RYGoSAm6n900dKXFqywshzmwJD11EJ9ve+VoPgfGYNLqd25Uxxn06i\nq/StQeT9DY2kHJw6M+5bhBTyCDLTLdiB4ECKyej2vC+fZVKyju1mpybTneId\nIJXchI75qZOGg+s1CoFzCCRejRreulUYPkI/m8X9ZL4aDyK9udqI0sC+2E3p\nAcNSGSzuePIRvIJKtogBJH5Z7uJy2ZSLaGIyrKnLZGuo5RNlBkKGc7fTF05r\ntdAB\r\n=4CvU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFpWCePtFum1WbfAbiMpndQsxM99q/DRFH2SAThH8Bh4AiB5Y9VwhkZINkBf82QAjgxFQM5yfliA5pPT+nNqhp0Ekw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.d75a5f74.0_1629446151949_0.19456167304118055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3d79ffe7.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.3d79ffe7.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.3d79ffe7.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3ITZ3NkTAdJ7Ak/gaIR5J2Ka61embyU2+XAGmagHGgiXyx4VvLI6aZlTdlsYfE1sG6PVgzWcLrS7JV1WeWty0Q==","shasum":"b9111e845f04877e49c447fb4ee8b336eaa02bf4","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.3d79ffe7.0.tgz","fileCount":13,"unpackedSize":54269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+SBCRA9TVsSAnZWagAAAYcP/0hd5QMW8QoNKj/cYpx0\nVDZcLXgtzKYyseMhZAylUoBAg/V6dVEoOLHUpn/A4S9Wa3boicOIcKmomB2a\nUeF+IhrEZw0eJGmRVuV6CzQXK2HsXPi+1L3xLyE3eUyRMmkecCt6W4c+dFsc\n7ZW3a242LTIwYYPavkm2eka402E+FkZ8s/gp5P44Q6UxS/LJsyTviy+xQ3p0\nl1dbxfFWQ/23hetTKXmyLKhM71XveCjEX9Z6OPE0Xu6xf1QHdwwsn0gmNikG\ng9OZfD5nZtffANxjQBHbKg9Rvo8GqwOVzymglMjsKALaKVULTzy78ynAmIww\nJCodprDNH0C8Dj8Y1h0vlgi1nzU+LvJtpiEJ6T49PdyiomGFoXt/aiHX1zt6\nM7oFC/6/Qg6O9alqLxVLUE9XlXl/iCv4A89hBrjESWT9o9SQgkC6x11lA/4t\njkHQtJ1CLYPnWPB9lYYARfKhlISkdzZZkBE7NZT2yU97uFidotA98e3sDmwc\nVn1PUidBHcUEfBXFb9f1S9kaAVsxBYOD0XVRVgvH+IgFeSH/fJjiW5ZOhIHm\nwES3QmnCE0xjQFwrPMSeQBOnc0KtyVP5J58M6nyJZDQ4RSXf9vDtyU9QzLw5\n+5rL6Gt2MsAyPRK6Kus6Nw74TJxpTxtv/ig2ikQrR7PkBD6tBj9DfMnB5ADk\naO6q\r\n=NnHQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICFN0Np/0KQ6cN16ZahH3iMRqbkcg1AcF8+tCzPEENMlAiEAvXjvCXpDzc4Tv542a0JAUODSXs4inAtvzirRqN+JSo8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.3d79ffe7.0_1629480065210_0.5629800245947183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.02213ebe.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.02213ebe.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.02213ebe.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2P7lBNqgZHFK4obO82vRx5Iixl6IYsFqbRkV+UMtG/U+hoYTx5VcWCeHAKkRm1aN3cLh/sq2Msn3EZddbW5pcA==","shasum":"1736555c1f0d12d4a27584d82bb7038ecd3163ce","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.02213ebe.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+WaCRA9TVsSAnZWagAAdJgP/3Tnu9lRAJu/8iOuc2ti\nghE/cyeAYNJ749rpk3jqUFVqodJdOyZsPvHC8M2Ik9xKfgSfzZ1coteCx+rB\nQbHcxzIfHdryC5kWvKVmBgjqMcgBzAZBwey3jFn1LF278AgbGkHQ8Siv/7ge\nm0rSDrEGwIt2XYG6HEo3oAbONVCoEO7vzsnOMDkqU4UvTO0K2NlE0ZRXEyCs\nE2mbtjtiLmZSDrJTmWFcmCsWsmvqvM/4s8TklZGm5YvhQ5gvolZJ7d4AzfTT\n6JqOdAkqmGztH41K8elPHOkvrtfoHSKYP8ZzfrUCavNb/3JlRy0T0tYd4d3Z\nd/aXYFpIji0LTJ6n844cAwkLATVt5DmtLtzN6LqTjaff7Ezy++2w2MW4Vv6i\nZOKEy8exNDnbC7AAgqah9Ycj1SJ3LuMGbtpuAplfaSaVgo3tx6pdwxGF3RCQ\nVjpCMvMs0/ietuB/38FOJDfjLcWPzw+BUG/7M7G8PXnM1G8AkhoCaCC75XQq\n1CZACdaXe8/nONtAo/xZIA9oGCxH05erQ1pt+Bp3Kt2bYf1jAI3YrfqO6D07\nzTWPgotqiUY5CJm4VBd6N39MIE5k774A+K0YjzbA4HxlJCzxuWh7qC5GODgV\nOL07AVJ/4e9YoQXQjtxIl/9yYjx20mZfRdTdTmJnHUa7eEcu46/F3PD5kOMo\nyoYo\r\n=YJmW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/UE6K35IQdSTm/8FJixiGnKZF6b6dMThDoSzNp7sDVQIhANF3WO4aC+tZa8W5azXblmiuRoHBc5z+hi2Vg+Flskln"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.02213ebe.0_1629480346483_0.006255061989174138"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90a999b9.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.90a999b9.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.90a999b9.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CElCrKteaUj29cNAqy6qNfkb8sGbw9W0Gp5hn7dewmprkFFn0T218YF4bxMBiTkHirXdlD9IfYNCgyEGJ/F8Yw==","shasum":"76579a87e59f096921bfc58710d1006b9a6d7ce1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.90a999b9.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/eICRA9TVsSAnZWagAAjBcP/jkEZoB6uC1IfXscoHuu\ntbLiyOpNdWkjBG3D/4ZACTS5YqjHZ/sUm6BlSjyy1LSDwdHpSJjvrAeL81/C\n5UmFtHwX9oZ/fRKL5xMLyuvtGTOo/GMPRLJuz1Sq3+HoJB/mxu/Y7sNxkdhs\nLyCmwAGRA5xNXrkzlGMNJrsEVjE6AVSSZxRfjdq4SMffqkfLDrxiCYu1C29j\nr71dxQ2+7qBWB24ovvkcwVFhxxYj2lu2vnrntufhjnixD+SZCBkMiDgenhZq\nLmvPWthLScE+LCqJx4CsxKbddUa73nNAmfB7PwGdZL4x85A+mV1CLMPFwvDN\nwsiUb/PuaEPhEX9JHvG0R7TwzYIOUVylIJUbptasXg7ecI2YAVsRqjqOz6rN\nK7uY4TibdAb6EvXbMtrq6hKD8WMY5AYGmcfmOyq9KPKKinsVduxGA5bupZLI\n9eoDC4WITYldzYWWy+G4CXFb2ZG7zDBBEyAsRhj2B/cP7qUBdy/ZKlHKsog7\ns+MlI5JgfogqSs6rrcqQZ5lGdgRFUHJOOpSgkU9huVy0OvJAV2CgMyrdg4pB\n8ibEXUkaUkkISNfuGkdFx8nokJ7/QeIYQyg9p0pE0gkSyIdmVcsNhlAgua9d\nEOzNrafCR5dinY/hx63TAPfrMgs9feKeLyZC8V8d5FL017U0DpFrbGvvTLTn\nMBim\r\n=0zqH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEADWmh0Gdoe0RuZ7XDAnTEUJygsujrnqpHmJOQGbw7OAiADOrM/kZQDzMdrjx2YQWJVoZ9xmyiUlYLgxsvAAhrL1A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.90a999b9.0_1629484936323_0.3947936214600758"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6db58716.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.6db58716.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.6db58716.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ivsE8H+fS/v+NLlTTIbp2IyvtKaCQ+u6VL2u6tIqGcACy6KepwIYnt9+wajiD2VZrnXk51KfCbtUic/E6T2XEw==","shasum":"601e4be31dc3d39cbdf8d4e4d753f51c11ab1510","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.6db58716.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2VLCRA9TVsSAnZWagAAFcMP/Ricu9OTiNwWJHmcCxXs\nTdQBQbZlYTCtOqeI2aeO6Mn/1zVBtkTLFFC3KnYwNBKfH3DW4lQtaEwH/3PH\nw+Eg5g43OAQuwkkqusuCnY6exehZWVtvxISJ1ZKbMmnYfviLcgoJiFrYCGWD\nGhXP31sJlQFNlSmDlDcCf8xAFm4CBJWo1syGNRYpMrL3yl8J0FSSYmTa27rK\n+KRvXuehC3gVOMnswY7SAs29aHh6I0ysEe+phMJ625uxZuGlv7H9R/j692zn\nHaqu13yJtp6wfwRwVxSvDzghXNQ3GF7pR4SuOEilJF8NmDUaXk2CWBcUUsQT\n2QPL1KhW9ypdMIe44rW/fkzOPXbyFVPpXpvpb95yAR6STDqV3AvU7fECZvK1\n7Z/CWs52G75wIz9n1WJB9v1jo8+tyt57d6uGXWCOhhXq3QXfFbEPVu56bXhB\nXtdawAbuxIa+ZQ7TMlx93ZP+6GeQ6RELtWknAWAVbb/vjhs46fAN4hqJFYr/\nTGoJnHZv2Gl1qocPmUVSIvhcQgAKEtTlh/PS6qXHEjUHhmosuXTys23pM3Hk\n+0EV10eDGsw37lsao91croibtI71uZOzO8Bspnz6ljfBMda5uBTAKTkREcXf\ntNQKVTP9ulEa+G50SmzBadA2c7Fl1esUrJyYYblCqUWVJq8R02U86k3klz1/\nQteK\r\n=gBsI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1bM+ppHGQvPLq3enA9wd5myeYkfHvJz/Cjbx+P4jIVwIhAJEgb/UxU2d4bZZUzGaJzOBKx4xVKWu50BWQ88gD3NMs"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.6db58716.0_1629709643054_0.9812701436706281"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9fb5bc35.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.9fb5bc35.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.9fb5bc35.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WDGXA4yy18cNxgeT2GIXaZogeF3M0tujhT+pholFo21ruqFZWFyW1M/uFRRxfK0xygouWJEjfR9I2sOihNN9qw==","shasum":"4e2913d94f5cc4042908cd56fecacd861808bab5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.9fb5bc35.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCYKCRA9TVsSAnZWagAAnTYP/28sUzkqctVz5KmZhqRa\nUJla8BMWXqcDnozYWBarw404rYCXIh3hddPQXGO16TjJ3k7xkwG+9lg6ojoS\nQ9JxFzpsJnTbUbafIQKcf576R7GX/xKx7APlqOoiqtfzIqReHl6avUXUjSbk\n9pnURZNtKmdCzm/9OzyuKJJoqMvsrN5Cj5UH0+f8k12ARk4xNiiz0nFJdo2Y\nPbnMALJsVcB5vNLJR8sScsxh80fwqTZyONhMpi6eCczgRbO5SpHV31SerTGy\nfZjQf/XSIh+KBhwjZCqtlP0otvk+C57A96OoCaK+DqJw8tK8iROhTFzp74gh\nwQ3KHFWHjZkvppTiFFPa0KG7O225V2VjzZVvDQtn9TcB6CrHi8u2bBGR9lnN\nf+jsP6o8AWcvaxUdhVkSwPgtwvyogAA7ar3BTHcLy7iZsAPH+IkHy54FdKIb\n3fKNSte1wSEPOhoNaOrZyoLRCZstvzs4tEdiQy8YLP0E3wP55uWwslIwtYF4\nWNjGDFJoiywwDpAcvvRnYpTURS4D/katn0zLUiUqf3d0E442CxMct+R7joM1\nmhpwjcsH86Igr2thY+fHP3Re6iSycBNgFI2OOH31CNk5FWetYXUsvJoM8BYj\ny5wVq1iQ9jdbzCxpCkL1MXBMZlHe/WMf+3ZXLJ2+z4IiIwbSA1+UVsFRvBWZ\nAhLU\r\n=PCJO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3mlxLDWzvKEvVUKRDNnNeZ9kOrMQWgRqb1JrI8M1QRQIgFM811BhPds3sPn1zB91RGZyhL4DvIV8oaqYpoElmzBA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.9fb5bc35.0_1629758986164_0.6281775925678288"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ddaa5d8e.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.ddaa5d8e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.ddaa5d8e.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4+RxHZzt//5wtdcPXiUVdUAapNCRi+UR0aq1anDY6OKqPBFUvblH33v3bqoKvDyZBT0G7Bn5f1KcjfnS3qPM8g==","shasum":"547b6b3c4adadb1e712917416de6f62fc1ce5ea5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT80CRA9TVsSAnZWagAAXqsP/iM7GE96T40m9Wg+CkaZ\n2MsMDYGnyMoZsQmTY89Ww01fEj89uQ+VlQeHAyJ1Zml5hLKU9yfDgNJoQyHT\n7wKpy29N0Cf2cf9AS1G5MMArjwnt5IjGW5Vv1VsTuVnKrXzVvmvgES2exfhZ\ntVRcnMjcAF2we/hl2n3L+XznsFXowuM2uBmXIgVxgYxcEis0ckoH8r2jT2zK\ndXF1CU0Z6TLW8l724Qvh9JmcUZiw0IYEbLfwNYxlNI+9Qq6yuzNSWXaQ9QiW\nYRywthDQOsshd8XxDLzbngsv0uS0HwfPkUoFNK+zXqzFX7+bxkv9rNHaQL93\nYe0lxiEASlq5G/27Y+rZeKxredSSkqNyjxnFuRTYctg/sWXh+NicGqOCOK+b\n0B5Rs2NVoPK6eAMYBHgIYAuKmQRLb6wt02l32p8cYmUAEj3Tk1bKGkjdWH+Y\n/2xzE/NLuUQUlHqGCl39aPf+G0/g+lreqHx/J8XG0aCIri4S02KHU8y2JmqQ\nrsLbeb4UUJN5nNMaQXr7dq73p2d5Canc0QNNGjKPQl6PMrOCXPiVpp3cvOKH\nuoMGfBUCAMBpOg1muBB2/LCWfKWnCfvaxDtp/u33Xqn/5GPNQTNaCUMw6ZTP\ny/7pJo/6MIP+MUIc3yrHgBKQqlvjstRhkcWEgVE3O6N9rBie4CfUU1+zk8Hy\nfq76\r\n=4S9X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHGCI+/ooJKEXnRo+j2rzbeE1JhJpdfFN6VHaEwVd3P/AiB45KOtb0vCcE37A8r5E1nRxSZIF+J0kiAzCh1yf4YDtQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.ddaa5d8e.0_1629830964271_0.32384466475751816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.756208fb.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.756208fb.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.756208fb.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6arRfxk8c4v5pfaazPLEmYZolYo2H+o1f8LiJLSILnRE07HlEeM5zWSY6f0ecYaddOmg1Y+PeaZAP0JZSQYasQ==","shasum":"42dd43e5987bd39f9ebbde02eaa949d081bb8947","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.756208fb.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp71CRA9TVsSAnZWagAAqgEP/3eIX+mkYC55f3UwwSxt\nB7JSXPWfuofZGb1ZhFXaFSx7HDLIkFWHCBqSRDEH6qs0vgJ5Kh3VCG+agF4u\nxQL4jtv5M9tzbnVWuOts/OPgBILe4M6cachaKS1TkB6EsBo2xP4aARVsPywZ\nX+UZBIkWdf2ju3c9Qs6CqY3t2ZFAa9UMvUStG1VrmOV+IRN5tJHJUOG8xvAk\n11DcyF38mm4cSjuDqyOKCa2EMg/r0h5e3CqzOHxIMrmIroVy9PqSZ1BIKd5q\nd6BTF5oacH/t0pFLrFMJzs8AhNa8rgHFtFfKAZWtNBwoo8k/JD4FFy14q9iS\nVGWe4NV/nThofKO6qUNbvsSt5aNfD2Ir+REN4RpeH+WM+IdnvpZbZzKSXekF\nnIg0l44XTM6fRM8eirzb0DloKl368s9kYh/xr352j41NwsDrVsofGaDHfdkY\nxYiqOnhpFSYBjM4GGkb5LTTdSXXLM1TQC6TvNJUZejJFxPTta7jzCunT7WBk\nKc9I1qo+vxLwH5SVelkmwXghNzVUQshP1yaA0tZdn0MITkpXA7mlz55FD+7Q\nxE3Dh/BAnesi++i5GMlM9CPZzpc0T0omrHmMwgVN+pCTvakyoeMrLVssEGIK\nJMKwSjdUZSOUyDx7RrH9V+Kgfp+pRj2zvjB7LtkRl+5O/9CFrXQ+A0pquKKu\nIdVK\r\n=48xJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRgjN6gnt51AkX6yepBCCU33Uo0ikGSIGHT19Lq5Z2CAIhAJ7AnZFgZvBiunNbhIdxnviZba/uB+k88OAZWTc5G6F4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.756208fb.0_1629921013474_0.8336788650043168"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9576dcd9.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.9576dcd9.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.9576dcd9.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DEB8J37QDFHMbgdlnfISODwJbVXVHiEwutKP899BZwTEsku9FGt5viIuCkk+nBUPipli6sWtjTwvT8iPey2Jmw==","shasum":"02a2df9bbcc48e569ddd05a696ae990361b0262f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.9576dcd9.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrmICRA9TVsSAnZWagAAP2cP+wabSKzKFlkbmDIjgkNf\neFiPmY5qZYf7/L2T3qTcgXsntf6wJxV9H5T8nFMUAcCTUM4ChwCnEhJaOpFP\naJlBFUNb06gqKlXYyKDu21WbXxMB79mGJzP4/WiflU60ut++kkjFNL9Ixq1h\n2JLBCj3rg+b42I6CL9HWJV5DgM6QelqH1WUS4NL6Qgd10Dg9AyovF/cokOUB\noT5xxkO3pegeBj2spk9dF4zB2CHelcmwy2gvHKP6DD2YYU68pTklVfsnTsAd\nkuzWtKODjzk7zFL/7P2QhgI6gaoOWWlvxWEV5XTCjqEVTN8kpQQ6L8lm9MvI\nTo7VsI5RCIyQ2iFjF1tmeZCsFQDk4HZlQJEeOKiZLbavBvr4neQ8eP29giuc\n9SWpgkyKqB4MKY9oAsYx9rCMSrbSXKWObMgG0DubFx2ib7oBW/CATZtLjdtZ\n80tWNNGyv4/QkwyQ53ELUvI+K8d/fhsBz5zExKQBqo9oRvoW2VJbIycMR+64\nQ1QsoAg4RWgoj4LIs9HYhr1vN1SE7OC2I2xVWFFNbtgrdJNMUq4quonipAvl\nKLItN4GMoXeiCERN7ZGHycDDjHqiqyKurip4D6qFmA1AO1qKrRwUOX1CFt93\nQECdX3BEs5o+lDIPtPdAi7CLmmtWhQKq1u8j1F9LlNU58smovhUivSHuRYwJ\nauAb\r\n=EYsJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEzEFi3VLQD8fs45zNJY9RWgx0fjjMCASDD9B/uWPysOAiASpTbRYBhlYwnJ7gNhxuBdL0iASDxXDGbktb6qOu08Xg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.9576dcd9.0_1629927816680_0.08875139593313719"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7531cf97.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.7531cf97.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.7531cf97.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Nk/8C8EFb/LjFVRe6q3b0+NKzVDfG1ByEH1dX2zT6FqA7bf4dymt34KNTum6IwJ6Ry3si6CHKbo2qH6QtSuqVg==","shasum":"8b895703c7d31333e799ecef57e0f30961be9d3e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.7531cf97.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ86cCRA9TVsSAnZWagAAGOoP/0Q/I6s1gQnRBgGQU+qM\nA2owcosHnrIyL3V0fluGVaK5TYnIyzLDXbAGtcVmZM/b6iaG2CfY/8AlWWBN\n8Kf3FWemPs7kpn8ZmkZk0sMOVOlrN1mz8OHOSz+CI8H/sh5M87/kKDyB/HZf\n6ZpPTsCR/pacRwXCeTgDgMbS4dN51tf8ogVa+xOTIt4/pbaCrH6xwwvlzEAW\nNOcq1FPM2QeJjkx+jBeIP++zWJ6o5Mhwa2XMC2Wnf/8e3ZkIllCmkaGVlVbi\nW+yV2GfmZVAo1bwXr0c/W6jBqwByNDU9MHFS87jJFyB+oyN07cSkHLW/HkQ+\noUUonB5BexmNlVRrSxJXrY+zVAhma6GSIEuCYXIKP1MDlcf6Qqo+f0+QQYTv\n6c3aiKG9TOXgZGvtkmwxYPsAGql8OEktbXTmLEpA7zlLe8X9HQXcNFuiZduz\nIAAzrc/CdNXnydYoZZ4pq1bD7RqRUYaHhW2xdGEDkwnvkDRiV9ffHch4lLOc\nWBFIuNVByz4XtH3XCIW3pj8u75rQSl+0XfWlZjOzfYJrLTQwa+Ipe6Cw1g50\nBObpx1Fdplvt/V0EOXIsdaIN/ZR+PclVwJaU9iVQXP1dcgR03H6brX0ikyKa\nb/YNVpBeqFBbM4HPVKYNrorITI9DZVa4lqUpn80/3hsrOvaCL2WXx1rmZcep\n07yO\r\n=hE/Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZ+kE2y4FqFh9oYwXmMlYRAymbxOwIDVuZysOmp+hekgIgGKJ/lQUq1So6SCKKFtG4ZcVY51mo/lPA3aHn3jWqLlk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.7531cf97.0_1629998748581_0.9176487156538002"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3bab26b4.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.3bab26b4.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.3bab26b4.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jE0it3sCUlhVAXnsO1YHxFPcslZtI087xYpRTVr8BstkJkqVwpD4L4YsO07cUArRpc8sX2CQgtSNIn64Tuy/bQ==","shasum":"ab3f79a0004f5791d0a2d0172c7069dfa62f6dc9","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.3bab26b4.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAs+CRA9TVsSAnZWagAAvVAQAJCM2aqyBrfvcGyfQEnx\nK3P/Ji1UUY1QvS4hyzn5BF5sDZug+8YQD5ZEGbI0OHvZ3E++NKtKtdyP75B1\nb6LATSflWN34zIuUhLxWKJC+MXtbJNglPJYRU4lle+ym1DIu8uU7wXOef9d/\n7nuNHqly+Lo/J/NVx4cBgrEoLGj95+mdudYuSzqPw43LZZB91MlxaJpWnzAV\nMHUbyeKnqYcQ6Xtk5YLLU4c4NFFm6tPHokgoThze4nY9KYXQQPzaZ4jyQ+YY\nLcJ7o7p7z/gfQQ0fq1IKxTKYtkGfYKkHDIlf2wXyc5PjwKMdV0H4wycL7ruZ\nUUH2B3K5pnbV43NzrhGxgrAqpZTlTylFfrpkqOnc23uJNbXLUGCX26dq0Ork\nHqAlIPFizEdX+CC6RP30RBkScIZ36pUO2Q9QGv4MfBchlF26I2Qbrf4sgDpT\nJrGjg1iyJlbUkCReM+Vp9Jaoo6cDFvPEb6AJnzGxkqw1TM9GBQOOhpvFotlY\nCkhatyNQ8slFytdGpEJbdq1du5xtCBRNa5m6tefeKnR4i8cOe0Q5OssiQ3Zl\nRCD4HAq7/74jMQsFEUCItDvczREWDrdjNVd+rQ0LTVScDbMwK2yQeXEdsGUr\nbKqUuvvZWUFsBUHTeDZ7ZG7+yOXQVwfmKnqPJY9RuiqxmFuZ9SErYEmS6gwf\nj8g7\r\n=wLdP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHKEqL476sYLMIIO6FsDTMIMO9ovW+2Yl4SJpPKZEAAQIgP9f7Bj8uRc9qDFYwDvBIPJmNI0wTV1sajvVsZ9gbRPo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.3bab26b4.0_1630014269939_0.3285434358466015"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fab48bee.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.fab48bee.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.fab48bee.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EajXZ4/kVmTcf+zkAxFeaKJdZXq7i+gQWYz+zcgRcYDgvAGHmfiy2Y9Y3lC+9g497wPNf79hdHmG4fRAVAyCGg==","shasum":"c5490931965c69673df686d9cb49598968f2562d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.fab48bee.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBCYCRA9TVsSAnZWagAARZgP/A5QKY0LRJcYF8tpivN8\nLAXMGLv7WOGj0e2FxuB49o3BhREmsMj/Mpz9mf7zqUGtdFCaNYYY2BziMXeD\nQbls4nQCW+tFv6B2W9H5Wo3dX8Z8GYQpq4cNXOEU0omPIyDu+WIS7HvVQ4Ow\nxKFkTr6sIzyYowlNXdH4UDLa7ObAawW9X8qhwS7n5z0zI1mZqFEHyGHX0i9q\nnDieFVXyQ79UKIRklTTiHDMExoK+0pBKOSBLLfY96AhCDwA1T1CPYzNCJd2g\nHYP1pKzDmBgTaLZph7d6DPcbZy0jbtp8T6e+iCbXFNm4VdEAs/jOjwJABJML\npe1rPBCxYsax66wTcS2DVem+bbM3oczT/bneLLW2aY6ZB0Y74+OtFVSsQpVq\n+ucFZDEul6Imb9f3nbXC4XVF0psYn4I7ROc/Ww1mJKyd2DYYVlxfLzNGcrrj\ntI/rs/ugolrjs9xKk5uo1+34vo2OUqPyNXy+3D85LxpbbyclN4lTlVDQxDSY\nAeemBbjfR38K/fEAtLhPNlijgPEL7F7zqeSljikKJ9q+M2AkFnI9Z7m3P1OT\nJXsaqTnvkX4Z8uePjzVKWPT3KKl7U2pZvimTUxWumpZhbiG32NnuhBIVkmMo\n04urZCGTgUpwzOezRP7vzJ/i5+xpBy3v3FtR9cBsRzcAKHvVLHtp4etlu3u1\nWgm4\r\n=ZM07\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAQ/GGkrUQm4bACoSo/jCLmHKNGeqErgoXDdUbXaS4uGAiEAm8oRB7ahskKsoWl98+mAIWw3kUoi1Ouwy3Uwz4AFChE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.fab48bee.0_1630015640222_0.5975940825721586"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dec18df7.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.dec18df7.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.dec18df7.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-a05ELgXN2y/WIcpb2gFvGXAaDvZKXkPkZsw7iVDt2JJU19pCL4cG0555x32l1249JJ1+8Kty4ID9hkL/CSmrtQ==","shasum":"ef0106ad086cd0e94d7ceff93bdff7d2603bbc90","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.dec18df7.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJaqCRA9TVsSAnZWagAAH/8QAJ23GcuBf5XkyeLL0DkK\n22VYMUB2s1zMFXFw3wnkq9JQNX00iAA4LbfZ3lp3Jj4yTMUaPmG1FgKTE56G\nEav2lBv/qjfH6FX/3azgvvqfT+jYCbd2cubMlqyLvBtnfEyUET2cSF7jjTpC\ndDIjOCs6PLqP4kC9HPXqJSrhGoaZ5EvMnEBEFvU14oOjbV78X9dWXImFp5Ax\nx9W/+oonv9CB5X0K2bnYjtkoi7BhkbNyw6PIIi1JDEKKFL/XII9vWeBpvoDR\ncEHnZeVJJu0Sl7m6HATFNc3zfXjpcRBiZhXT5fh4P5dTnfpNlxT1GQnPnVt4\nlcdWsNCbfJa+0bRtlslR83fyxLp2TfjfoS1U0UVJl9KyAu4geExYyrlCOXxN\nrnYJIRERozLxddRBinDPW2noMXrV0bN5MElJaTMNwQUUIdiadkOd1QEbmhe4\nnnarogwT7OIQpXwMkOogEsO1Jtho/izpIEMFbkj9k4a4ZnRFrhhwM/b2KaQN\nCrV4XyLadUzyvzIyD1Z2m1udRVhWLhudS8F6+50neqobeywRjpHKI1YilmEL\nJEwHGWXqJuLZYFCmNUFq2kFprTd/Fcp3BS4eJ6tk///iIQfXgXgGn71Q+PRo\nqWwK1CTj6dnlhWxw9HVTVczoOLD/DGNpfImqlRSUjhroSuBjAuy4rsYX50zF\nwEsa\r\n=BrZi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFF2zFW+cn64uSc+DY1RFkL1/pb7BCSfMUMCl8YpZcywIgIfO+dLmS60Vb2NdLnR8jwS7HC9jDVuWhZz6BA7P9Qoo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.dec18df7.0_1630312106517_0.9645288198171205"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.61fe5b17.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.61fe5b17.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.61fe5b17.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/klCd0lA27iZvZtL/2fdZ3vtoIEXLcX6ZNWBWxQgcM9eqKbFq0KQH20RzKaLySvKwFcCNuyRgsfXrlDvs9Ezkg==","shasum":"7b5dca20c3c447a9f07b1818eb4ab4cfa8920488","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.61fe5b17.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTFTCRA9TVsSAnZWagAAoVcQAIjz1Sk96bD/Te6Elz8V\nWEthvVQzR0w+gpX4R7IXB+UbuyWTiudyU/Yl3Sfs9y1XTEFjCnWpqr/hxtay\nj69OiZuILfz6wAc7A/2f3M4GmT5fieCGVxmgIG78HfQq8xdIXYVGxbzSMtUH\n8Cqj8a/vWbWffIDbtkbPU1aK/iXtFFr8kcjBBzuNbOgWLMq35ChuvydwlJ8p\nZ8U4AEb431KOyWYpCjx819jWIN6u8nMvjWCvoz5RY63GXRL8zGPd47cInHBl\nQzUvzQB1/NJ3AAee4gqy+9NpHdjnrh+lCLEiD/b6cFxkurLatKqfsX+yyQ6w\n782NNe3tAofYbql6KxTmY8yAUadSX1BtUkmgFGZRciQ263LZPLTGTXywbPvD\nWu2cX1aluTXmKwA0VdUHvU1Ehce+k3PglxdO4faWU7RMLMyH1fhwpyUfppkY\n502M1U8b1CmNwpLItovEi/kMH94rBWDFvYea1Kv8VVOgqxk+hTREIkHGuvdO\ngUB5eCy2frrEQoezGXo31qFKQ1fZ4+/dmayu40SGI9MTtNdtaIS3TpmfRHcE\nFPoR/FD2AhQRsB1S5YtIBoSFzyexWrju1q5+51/9rfMPIGrSylTdHCjM7w3c\nBdg02g3p6ks40XDZCWCmkIdydDrcI0KMv58sTQTYGBaDHjE4leCryQ2AZDM5\n0pIN\r\n=mxbO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDG7hSgrPe+pxef0nVmjYYiPZduRT3pmOhujPb08ukOpAIge2PCsE6FnmPigvtkTkxsMoKtrOvRMIqWK9xOUq9hW4U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.61fe5b17.0_1630351699643_0.6152229696955753"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8c31f54.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.a8c31f54.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.a8c31f54.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-82C+jKNf7cYZCsYSiYCUtIy/AxmUYz2ekFL00BA3LsOU9yUofkY4gvLb46ei1FcnpNWKQeZJY/MPxZKReTK1MQ==","shasum":"708aa13c987c0af6f628699e0590f3b72f8ebe57","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.a8c31f54.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLUAMCRA9TVsSAnZWagAAgywP/3NnD3OKbc3Qd1E6Coc9\nvUpVp+764duTT9kGgk7yTolndmSATd9xrWZ0a6ko1in8Mr+ozKzeKkhH0vek\nqeRtOc+ElxEyzEISJKRYtFdB8F7s7Tr2oHmmn16NsEG6m/WcEkOien7eyGvt\nfmLaW6KQkzTJMGAjxeRKb+ZkA8Gw+V0fhBVUu5RIWcXGTF9jkZ0x+DbuDEKx\nUcz5v7/7qZeBLxEzSSS+soKATh8fSXxqlipFhmgZB1S5fs2IrYzBkiVsB1ne\nMamHhRmQchzAoTesPNzsADyKdM+/hrFV/DdogbpEmh2Dej2idjCrrAn6nrqO\nt/mOqktMfE6UBbTNrWTbtGlHRmYa5o8zs8/vSZetnM8DEKKjEoymBTHd2BD/\nONMAVgjw3SGQ9h1Hqqa3qHRLoMpP0+t/EAsPiTdWbk+Mi876EIMNoJ5qKwfj\n7DzMslqSYn0ct+SvsNm7stP0VY9qak/StQ1bGt6uK2HWHsWq1AHqF7+1LIav\n1MpZie9XJM5kdM9xqXx75EjKIP+63LTFjzVSYEmu7zneqc4G1hxWGLtFCVHg\nxnKjO4OJkceC9BrLUSwMIoKYzcNKl73zER5vdwxpJB1fyTkGtVgX2zUKnLAI\n7oDAFy3EQAbjpVOWIVpZWtW37ijA9slNKZ04O+jzhdapG2tpvNdXQFFdJvEm\nNpxy\r\n=YsZm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC//35vi+73ZhN6o0dpS6o+CGXVqcpX43pzNZqjbBry+wIgF/c9I6Cw2ipvVjb+LvGAlVnwAvrEXWFv2GB2k2Voi1A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.a8c31f54.0_1630355468791_0.4019919463622783"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a096dba8.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.a096dba8.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.a096dba8.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Xrb0AGf4fm85+Z0q6rrzORCutfkHCzY9jj3bhc3BtMGDKXV5+vu3YFxipSC/sc+DTs1Zw1/UeIUv4Ol2wZnHCg==","shasum":"e1a39f5bc4210ab7fef74b0d16d4dc5a1a7eee21","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.a096dba8.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqq3CRA9TVsSAnZWagAAMuoP/RRDc1EfyH039qwvjq2G\nmctWZtJMf8C8uqMM+zOORewBQGKd7ifpqfZNmlvaVGTq1KZjU+XONByFs7p4\nqnGEsLn5Uz5o/IvWf7Toxy1Ww1KK7Wr9AQCPD2SslImKWOy5nyZ8Zx32FzTm\nCCJFkmFy5Qk593kBcvoHWBB4I5kZb+NvsRINq7ZolklkYWG4PPTjNnh6yiPM\np2E4Vg8nMfDaDYfWvp2o5paRTdDLZOac3bssc0EXJ3EKwnYqPi2ps97rXnAN\nXabJnxtLa/iKMIXHRVLfqzCpKBOqVhXdtMXmy8x1BH4xKGz14lPDKIEy2DMW\noIyvkNQ8Z9boK1qrT7hxsUcBNdJggDoZgAbIejeLeisNKzDpcH7FrdxkHGSO\n3f8iLIpo3EfUYXeRxxx8aR2vQ3jqUjKTT3cOhcpTqYPgpDMJtSBcnINImSJq\nWTy6QdDkknB4wpOsI7xvdVMuqj6fW5YNZKwBN+B+QIzhvwJajdzHtVLp4K1c\nPRjMsU5VKuXkrinEPPzoE8apxQCGG+aYbBEdn/zqA+Rn7JmYLRpEGyhskK3R\nVqzXmC/a0dUFnOIC+IONlYLfMz9BwPE5TGIlW468kmHLrEkxXTg4u9CWb63f\nXdQIxuoM/wRpiQKApVWmLK2OlUv2d1sV+6xGO0D49OxhQ0gUBI7eLSCWZ3Ih\nMrLn\r\n=qM62\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGmfTgZMWgOE1SZbzvjlJdRHNxyUuupo674S6R+sq7R5AiBMrWGmrNMQnJgLbptZUNvj0szhrqhQph8ryFcVJDJqDw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.a096dba8.0_1630448311131_0.22637711898327395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7ec04d47.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.7ec04d47.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.7ec04d47.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4KtXoc18tN9VGTPaZCe1lRgylREQUfX38WfJhHehXDieIDgHZMEdDhjl8S3w7cDOIpxe0pejj6CVsIDE30Nypw==","shasum":"0f601fe3baf4b97768da917c546ef105c632aeba","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.7ec04d47.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV1RCRA9TVsSAnZWagAAjvMP/2B2nd2UVH2Js5SDXzXu\nhUPtCYAi9/07Mu5FwJstQtmbcB/p4Sye34kIZXnvC/VgICn2gYCP6Ssh3hSm\nb9Up+fw+2NoqFGRrUzwOtJRMYFTZu10o8cp9iKnSCRdJf0cYRJJR1xLbXp5M\n3B8uEMpx4/LD9554zeVaramfld4Tz1hrCarIsYhRLwUrTnGTtKOpyNEIxrJx\nAqZDbpVtKUiwLidOPwYsOcGqjaBw6zSBGEb641nB1EL6Vn6UUMyMEV5/jyuu\nM7oBqQix7rIXMgOLm3r/PCZzMahDJGrDzrCvtV4HfhxfPj4zpu7D6SLzJ7ON\n0g+Nc3Jcv/Oh74Ie3HBrMfpbQhVwp53E+RsS4lZm3S/M2yrHkOm4WI91I3T0\nAv6teI9DVBGd9h64pwlPpHbY3elRxGoc+Ydcn+sb0bX2/XU2OX5MlMOBUcFz\nMt9vVJz6UaTr7K87Ani1zvhAHfuEv7bLaxqMgtHXxTPt6teQDOMaivcXQmVv\n72PwjOgtQ+vJmIGIHn7JEFzhMMzufbqfi9RMkvIg/QqpJIZ6bc+6vWo40tTW\npXC+VsEHlDGGvX1Vn9QwlK0/QV98lsVFKkV0DL2pYMVx8WDFupU5hbXL/1bh\nEUw/UzmcrnHHA/HgVDiPwob93mvau+GF4zVRQAB2tyEVsISlsIC6CYfP9CXD\nDiy8\r\n=+ljt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD227+FwHArYA3LUc6n4Lwnzm93uUNwKaoaFBIO7wdojAIgbjtaI6qdtNK7VWNm6jBUR3aJi0RHKDuqzyuUkwrdHmQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.7ec04d47.0_1630625105841_0.9197518339634072"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d00b098d.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.d00b098d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.d00b098d.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ijZSd3Y5C5LF/U55zOytcJoz7Jr7Rli2D+CP6HX6NyK7LWOlhR4DikwiWc1YQ9oF9BOV1UYstF7vCYOkhcjZ3g==","shasum":"bb604e610f9ebd689430d68bbc0fc78c443adc2e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.d00b098d.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpL9CRA9TVsSAnZWagAAQaUP/i7bh5HReMXl9olyXw0o\nBDnGyo6AqYZjSRUKGNCTUnYKzKZDl6zONj1+/+Wcmxngpsp+4udwvvopZ6Lo\nCRgMYOIApbCqnYUtH5kGXC0W/rtj+Dyd73NCqJ9YtWQgaXBLuo6XvlA0KiiZ\n7hQSJHgOf/GB4Xu8Ir1GeZabhFChuiRfcRsVkMKnUnsWgUrCkyLLMCAPC77M\nOvQGlvW9zwukBSoseo6pQm+C4hn/Ydqr64YRW6Ckwpe4uFPSFhLlMdGYWK8W\nDCHhKMCZ1tXWrgcgTjDsJ4sjChVPE5x7NzJv+hkQjPXxFyVgU4URPBJ/vrui\nWMZ7+9y6O+jQfPO6Gzw+1L0kmyzVzB5myeuGbAxUxgWtrafVc071bkW6I4d7\nDt3Vei5yMxMTgRqtoqAnhTZ89dlY09wyG4gUZg3zcOj/SwxkdEAfR5FzXdbg\nZY1drt42eIxhwze4YkS0rYFdmDrdNbC8P6KJgjt6Jl+zhAeVxJzhVZpzqpq+\ng760ShlfGRRny0sXylBUuYic2D3C6RpgKADk5/k32bAQp1em8t5jHr6VMkRf\nKoVwP8BfUIdOCyrhVxDESTxwB2bPbuLAwM7yWGFNLSWiLVgL7Ddtec9iOlNk\nRSSaT4m+eCF9PIC32TjQqH621Aav9tPcLxmlvuNNh3Z/hiYFIATwmX3D3a+R\n1MBY\r\n=jU4c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDb9EWXW8wGgNFIgTFyfO13b57eqkdTJTQVFQUx3ka6wQIgInKGngge2CsBtP3Inrprv57Fc+uoStl9EtqVdBOJe/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-drawer_0.23.0-canary.d00b098d.0_1630704380829_0.3539459823181428"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f29b3352.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.f29b3352.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.f29b3352.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KRR2R2GqrCV3Yvz2c+vS5ctN2iCKxYSTwUi1GFC0z3XP794C2cRBvhxAZobZ0D5mRDAflrsXr4nhFfcddVfkZA==","shasum":"8e44b913bc2ed26a7204829ab65667f48346121d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.f29b3352.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6xQCRA9TVsSAnZWagAAmA8P/R6yPTfMv4f4MiMrzSBm\nPobHBZdHNzRob56EyenBtS6OT47BBLtxLvdYrN8/KXit4wEKT/X/PWo033iH\ntrhf96pApZSgYBKKZ1z5u7EQTokd4uhcTRhywR52lHg1U1x6iwBPdwzYtO+a\n4KpCJxv6HxjRf4fgaCx0F/9DpAQNenR3icoqoTFYTkuCAi6gtV84n1b+DVPA\nY395PBg1W5K5PoUeEFHPtKnytx1t+tfF9jroYyKJgykeZnhkUKbqPlEDRB7y\n3We2E+YLRlP7Mw2ExchXNGSG9s0RimAaC3unPj5eilWwlDvsBHLa7+nycbTq\nyvy+SjIq2B5aP1Npbjt9UvwXtoVQ9MVLqlaxXaobs6l0OAqo3/X5w2pDLyTb\nQxeXGFTLF9trhGoXne7J2qc3suzs6TE0fIODWsPIDhLv/rGXbfBjvyCi0pHB\nbAmK9MyyD9Hn0dJYllpMDLuxLfwDBESLr8XBg1hx6UXt0N6DmhUpgYVTzyCr\ngUDD1Ci9LaXJx7bWF/0JCHd/+sGkUW2w/YQpZn5ZvUE0sgNZb3sgZTbkkRZH\ni/WlwnPRa81G1/Ifp+BFddJt8DoFB/HOgLcboVg3ixgDikQClJv0fPrymBUE\nSMVRy29zlmjorQDA63pzDBaFTuPDYxqQstlTb9LupV0O5c6qv0kvhPouSqUh\nhJsN\r\n=hipp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCt9k9siRUfCIfhMjBkzERwyHaa5f+oG3/dDcyQQzNTbwIgR7Q9spY0PhJPYHGEZQncAAARyFm+U2/6fRmMm+Ulngk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.f29b3352.0_1631038543881_0.3859274542961748"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4962a163.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.4962a163.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.4962a163.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Uzo9l87Y+nN7xT6gclB1X2gdKqyuwW3vjjgeZ1ZhkBjn9HV2YP8bTO3i92/4vgUO35noJx8d8+hAxeLe67K6cA==","shasum":"3ed4ee35d7e50921adcb8540b7d032224c8554f6","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.4962a163.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/tcCRA9TVsSAnZWagAAdf4P/39SAyVt4wPVOPu6SFU6\nEneuBTaVY95nIcXNGmF6/WUPN90H5PzpE+TSYMkatm3i7ldpI9ljBfPLebbB\nVCTxriOYikg1HhBCrER7wuDLdTbe+TLVo6MU5/GvtTjxmzOAl//Zt44tNV7J\nlMntl7qNY2uLKio+ZL/7CSRrHkta9XVS9W75/82mBAvfXHJX5CyVoSVi9FS1\nIPQEQypj0DMNAKJY4p+TroHAC3yQXHi7ZvYyNXKessem8osYC4guewTx/ln6\ntVA7V7X9pCh9YzrWhlF05VWdXVICJQHkbze8hB+08juxc8swiSq6sMSFOwLR\nQogY2EkOL2ENoUnKki051+QxxvnOEGq+mxU8oCaJ/nZFCm2QQ0l9ttge+adg\nz6C1fKui7tX86D4BskI/njjqh4MwvovwgIVte6M+CtqW+t0X6dRLhuAHmz5u\nyAi3NVLpX4qgHRoGmHKTJ0YGGMz0lIVBL/79flvFtNUvuwgC6Xzy5XYXEl+D\nLfF+2KRRT7vXxxxUkdmE90cTrD6wFGlDKN0WxLHnVCU+bxTeqgJJeV+SwLDM\nKsMx6UzfbqbT4Hl6z0Sj2Jycwx/a09XZNeDxWNPULMeFGQJmnwjVcxKfH1lB\nssMjdSOJb1pLR6SRW86lcUMK1qey26x9Ww5Nta91+E+a86UifbuMJ86jepJN\nphFA\r\n=xrRT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJqhgBlZu3/VU1UkW2PeNv+sZHcirIB/dddn8xSJabMgIhALaclIYB3sy2ojksZcx9sR+hlL7RYficb5NPQ6G8wJrU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.4962a163.0_1631058780144_0.9790883120669724"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.33102bf4.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.33102bf4.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.33102bf4.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hvZHwCdF16HBePA00gT8elYS2Qk9vR02aaWxEnAWgLpUic7qW6a62dXBbFPjqEk8TZ+BN4wiKAMH9v60ih191A==","shasum":"1f3d69db9fad7a0c7d9752440eb8d621d193ba0e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.33102bf4.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOAATCRA9TVsSAnZWagAAIAEP/jd5KolywRPy5j2jOrhi\n78k8/gsJ5MHBye2Xztc3D6nibbiJy+9/2Q8HsGR1UbFW+RpgFyOuOxJllxQl\niGEKcLIqsK87cGT8y8k2qdcX9rvBiHp5iKv/PFsPxpVwYuEaOM6bwBhQJ8vR\nZISPG9v1KcqwmJaF32Hv+kd2IUj4mgnFzpm55MI6GsCGYCLfTtczb9eJ88d0\nLktkeTmxOVoW2Oph6/0uj2J4WHaYcUm41MYgErflOX6rv+qCWlkHNAtskL8n\nWT0W2LM3bQXeF60SkRtnSfjCocM1tl8GRtGTQ/HwHSQXp7dnKcdanJiuPqTz\nTtL5E5wCM/x/vDVcBRolagEgivV6jlmCTVJ7P4m4nGaalvyBIGdfXG8EPA50\nIG/9k/twBcVNct5GlAcpiNRx7PXkw0ET/ajd87UcLzUHL62TRL+PDx46ZQQa\nq0txJwqoVI6oIUg5jp+/05SjEh51dhL+hWUsOl8JlhNdOMwIKYdJuq2T0bW/\nQxFVR/iweu38ZHBr1YoQl1OJfm0O5dgrgo3XXHt5a4tuyD/sNI4z6J65V+jk\nA9xNCIGgG7ZRIhBMgYMEDS+i+9e4lfxfO4rmTemOIJmqYR9XQT/6qllWDcjs\nRngo8OfqVYof0B6Lc9DYGOvSCZlfs21tv3rQsB3F0k+BUyK/691lPAMPZ4DQ\nmsta\r\n=Sctu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFgjn6GtqYhuDailRQdVKJbXaa9DLQuQKSYif0EXhwNGAiEAzFCbcw0iuZSjovVo+DYCykoE11UtGGaEmyS+M3Jxtug="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.33102bf4.0_1631059987465_0.4628754918321034"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.76c68381.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.76c68381.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.72464476c.0","@material/mwc-base":"0.23.0-canary.76c68381.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.72464476c.0"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-r92n7rzqgufGYryzFwmJH13oRd4qwrSpTCAjNWT5oVYlo+w3Ts2eWYmbglqLKzefsqOV7AkExVzO+kS6Cswrag==","shasum":"301babf589672686c3467b3de92d0a4cbc317ce7","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.76c68381.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORlgCRA9TVsSAnZWagAAW98P/jRxJguuUxY3qmf+Bife\nJJUXjtXeIvuOqd1erKMsf/DHqnGKMmmEcg1wSuVr/VVOkBDhuby7S6AThzR6\nFPCUNS7YemDCigWGaucNnhMmxvHGpJ+f4HZLG+YMX8lDmhXi5U1tkCJYaXG9\nkzKIIhbR81dT5ju+i9lYenHHR1VBluks1mpvR5WQkMe/3aWv86Po0YEzVpOh\n0SDI8nGs1qGPEhlplqNmsS2WWhRGGB5PoQ8FSDQl04gZpRpegYS4x4grtoY2\nvC/+jCP47TXCPTcBN9qSJazL5wAn3ox3vQVqzwsKcko17mI86LH5w9q7YHCs\nT3BEHjJFO6KwyKD0cit88h5DWAHZ8JzBXDtRBmNu2lAQfMdja70QFT08mCQN\ntC7yyW7xwS9TZrg05tWP9yviLn+0CmtpLsbwiUIJrcoHANDDqmFI9jkLDHux\nnj5NqnXOc2lGTX8s/vC10KYFeyeZ8V8qoM6D7cWLU74jQr0AiJ6jRODseK6+\n0edAgBj/TlwN5ztc2ZdxIO8RSnqOBWT9gC5G8HPHmIconSS+2vfqBXZdUWnP\nC+z354FZrdiEEEJAWzcjNZEJwfT7AknvNgnymtM2I3VH2S36YmY8XEQzldH9\nlg7p8cxPZRu4mohc2hIN9aBvGNyCcGtnQ1/EW+5VOnXJZQG3iIbec9oZlYH0\n94T1\r\n=XRn7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDz+uNNyHV0sEEGEvwAiLjFM65mRSDCTeYMAWZ6xcQO4QIgWyt1UvhscRc9OcbLXLchJeXAuPEd9SlqBuUzp3o63a0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.76c68381.0_1631132000653_0.8846822691077654"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.17d51f76.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.17d51f76.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.72464476c.0","@material/mwc-base":"0.23.0-canary.17d51f76.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.72464476c.0"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wRHg9M4J+h51kk3mcfl+e7ThlbKvSeeXQebPCSk4+g60RnePoB9xau8cadekNDEBN92xFH9WeBdV4JWvtoKw+g==","shasum":"b332c60b5a59fa797b6a978a2d65aca138c89e79","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.17d51f76.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUaFCRA9TVsSAnZWagAA0nUQAI1SDUpT3VxBWtnTuoux\n8xGEmddHZG+BnR9PSXfyz/9N7EteATuig/z4CLqZ5mGWl1Fyl7fm2IzGqyjT\ncV5jtHAly2Etgw1i8jqaoAYxBx0oPrXBl1dYvOx+R8g1KAraaXmI4JcpDxjW\nIHx6uduVbvfD+u6rvBPR6kPd4als72zo/aqKwy8evM2ugpgAwRLAL4d5HoBk\nbzu3DOHOlSZ/k0+HadqxZZo7IFzfbl8+FVWM24CEA+UF0t1FneOZ97ioSTG2\ny0AE1dh5lzwIvu5iPEdKlC0OU112e+vQfcdTisgvA+u1Xxed3Iw7S+Ut9umS\nQWNlRO+yXeBkaANaVCBxoz2TFoqoesx54fcMnjcf02sU3aYjyqgCiYkCE/rF\noTSz9FYlLqmaNvOu1MnNeyOBRawJpSTgBuNFOu6aXr9IuQ1v7Ar2KmkTYqdE\nKNhuSRinhVOqrx5NUsVt7fEkkaeI0nygqV0khqkDjilYswTTq0U0khGhRWTi\n9R2DpZBUloIe3eiIDv9BlGfRuikaezA0pvZFyYHJsvOJ6LD431MYzOnP3iDs\nLokZQtgdTAFlU+QFes91U+bLS9qjFcj3ieaOIzvbYHPlNJMl7+bXqgq5Ocde\npRfnPLqtjLTIPa/FmkNlZgIFE6EiZDu7SGBkfXigiGmqRlVzslV0sXQxEMWb\nb6+f\r\n=YH/J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlg7HRw0OUPSEUvzXAgdPuY/ScmY6tKZf7P1ekPd0mAAIhAMgO19gcwT70sO32QsNQgqYActdnP+NbPzIDhHbw1qhA"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.17d51f76.0_1631143557535_0.8397693996648135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3fae6c2d.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.3fae6c2d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.3fae6c2d.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-trNYge3xlLKmTvRYLur8M7G6h76WYKmTP78DCmc2Qd9aQYpTi9B249qL4zUMFOF2Gu+U1Ro/tIr4/I2NRJBTuw==","shasum":"2f0b931b73dc77004408cb516398f752014160dc","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.3fae6c2d.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6S+CRA9TVsSAnZWagAAFw0P/A0sfo7QA+qh7H++e06+\nMA02NXz86Bv2SgnMB1Y2f5Pr+w3sCiMCvw/0kaiXaocF2kZ/c7Co61dV8kLq\nvaz/6X+s0uUWwMtH/i9sF9GFXMJTWvn/GVTKj25g3zPRZftKaz49+22tHS4N\nvn/RPKbB38YfYQA/okN0JTQkKGkI0RV198akUXmSUt3/kb3nUoH8fDSsZvP9\nCr2QOZNrxMPON3IHUgyTHRIKzkdvx5E6wf4hqvd8A/an643FYq0fbus7VQnO\n1O5bulJNWJnlDY+bHA+99cVZ4fo/hi+6vq7FwQVpH/xO/bOkGXxFCbYDfjSO\nmhRjXVTVJa9EbqPe1nDenFyZa9B+vQ5Vvv2vPyYjr5K0jTht+hwUA1Pr9ebr\n+1gZhw/AUOcZNMA9IHBANKViI/kmp0UGT+tE5MnLhk1H5agtzHmsN0m+v0jk\nlU4/J/LacQVRPhuj3Y+p1xH4K+SW6/tcW0Gp2+IAS6hBSaTlJ1zHYApieevz\neGH3Ou2L8U6sENd6L4I44gBx6wVoeL6Qmf8Ufu6MCgBonZqZtb8bq7UwiHki\nRUPaN5okWONI7PZcAjxiDrcM+SVGNXuyhH1hQdKyY7OuD81WzCAxmiBncQIv\n8bvEkOtuRin8hQHr09VPsEJfd9Hy5LdvBnOD6gnomgOAJs2KL1gtJjE6iwjv\netfr\r\n=tcS0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCz+UxP0baWipYbvEyYNKhfi+rhSDuvdInnDnkTsSdGGAIhAKElfYWG8QiN1aBKw82ZX86n+C0tYF8o437MgheEeM4D"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.3fae6c2d.0_1631298750566_0.1438785469997077"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f1958c4b.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.f1958c4b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.f1958c4b.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uGGqluCRrJYu2oKxtOcXKfEhNKBpnT7tbak4+b308f/P+ZZYaG7cihHqntMjXk+4sqSedgqHX5+oAROf1K9wig==","shasum":"1f40299b570a73446aca5870fc06eaca9109763d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.f1958c4b.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6RwCRA9TVsSAnZWagAAPJYP/3KZKJpOByYMIOtyYXsJ\nj1kU7lPuodPUk4IHZw7Dw5W0AwV/iAi0hvUcNOX30S4/krGCFEOGxlc9TcWh\nZzG756u88CBLKawCV3QvceBkYhXBHY8jk8PoqPEvNrkiFQB9rYgXOLo58RRh\npq611I45XHViRldQ9OQpidZzzO98IPrC8ZMVuMJehQ6lhezJMnRhZDTLzutV\n8I7tga3XOPaKlaaHeYo8cdTnG4kvjoc8paBhIoZwza6JebKOa3JBk7P4cuKr\n3ze2SMalNAlZVjWbFB9yWGTZhKlvCvpL1rS6UN5uFfBa0PnrTcDQxi6RS9wf\nGNiuwknlcJ5xbhgQca+s9v8bhpbgmIl3SEfLYSVRhWiN1K6HosWeua8JPJ9s\nPY0Ke1NPR5xYFa9hZIAsfQLHG4wC9ZlrZFg/YQgJIMsSN3YqH3tYS+aQKyUY\nZARjRMhJcDqhLCKsZU0W/PiovNAgQXGZQNmphsQfN9yCHopSramgrai4DJVX\nJQcT/ZrX6txzZT/S418ocyphVlb/G1oojIOP+rT00yrKNb+CN8YIq1slDKtj\n0+rL2UFEuxfWMsKYv74zQvcIQWq5bieIQiPgwgdrWtWLGOeOnb+QmCDKolTE\nSfPowROX/KdHOJJAHd0A7ps2CC1yWnMNvVn1wal5dopHQVKIhZH4XBo47FAL\nEy7Z\r\n=dvA4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGRoOtjzF8s1erRuBt2w87EFZbC+Vfr99MM97BQh72JSAiEAvpLSyj1gVsa610NrMoAuveokJaPWyOR+s3VIhSnaysk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.f1958c4b.0_1631560816116_0.2769972957637119"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78abbd59.0":{"name":"@material/mwc-drawer","version":"0.23.0-canary.78abbd59.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.78abbd59.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-U2PmXkQ2LNEhnLixbL8bFI2cJAkGK2h6OL4oWCNXp3k+RfJZB7zlP/9z0QZUx5IRmSXpJ8yV0PeIEL6c5bgS+Q==","shasum":"12288f4aea65168918677283a26a0da8c98604a5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0-canary.78abbd59.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8HhCRA9TVsSAnZWagAApiwP/A1SXbe9djmAnOQSDTES\n/H14RSwwYigUmGmpoHK/mE2YjBdhCytq3pFg+Gc2CyuEcUSS5wKlqHFq0rHk\nHgo5hgsR4O/0fDoz1VMAck5FEVd5D74R/5VFzdT+WNYMtcoxYvJzremqRAgH\nbzHom6mABJX+taWiDbxCIY2eaKCOkzdjppj5Q0HUP2HjPKZHIHG62ZbwUX92\nXl9IuwtzwcUh+L3kU3G7JKlkmN+dNfyGRgcnVFDSR+x7OKdsrM875RiLeu+M\npr9nr+NKhYx6OTDYQGVePosVrDllzLryhHeXMkSJIibv/26MLfpUYQLuk+SK\nS0xTet9yDgXWZMXQazIj5UG0Lbz8kJHWY0Edgd+gBr+Ms0FgRw3Wx+L8Pu/y\n9o2VBkNtBxNbOQWD2g7xB2wnnNed8tfHSVPNhqR0ojyo1AJ4Vj2i+MP3TpDd\njAx62cqpbe+I3OzP2CSbYssWulidqo4eHsmEIpIzamg++/9W0HHOIT1xYrdi\n4AniCSsfJpd8fssIqVn26cdLs5lWJkgrgPiCOMUA66CSU6IgL7LFVSt9C/lJ\nq/cS3cQ0iLGLbGTE7X9MC3fck4jBIuLzMxQZgkBnAg7c1wqSkQdB7oxAxrKy\nC/51g1eIufGp2WBt7fEVgVMgKo307rUP90gUAesJxkKaNYC9n5bGJBEjfpuX\nX5yV\r\n=NOtc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGJ4wGBKDp/md0tHwWhkcyAJ4t/Aabg/ie6H9BQAjdtPAiEAii+fT7synuMLpZRNIWo5p/QHMd4QrViK8xtXEWlxLlY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.23.0-canary.78abbd59.0_1631568353569_0.3954607725826631"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-drawer","version":"0.23.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.864798678.0","@material/mwc-base":"^0.23.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"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-drawer@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-ferW30okWf0YY84rCBh1xUHRy7NaLwK7qooGfIFsLuPMoloa5dbH6tqpvd3VU7nRh6UzKZQvojbvLcqpooq9hA==","shasum":"b4919a74c02043b00ee4ba48b8395b7cef6c4ea3","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.23.0.tgz","fileCount":16,"unpackedSize":72599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8QsCRA9TVsSAnZWagAAPaAP/Az2nd5Wq71sXfr1841v\nl2DIX/Nw2JwHjws6PxSZciumXC503emEEib7KY6G4rjdg+YFXBZCPfBRUt+Z\nz/ZSkyuE6ykKJ+agyJlOxlkD+UU9L782pnlalw+XJfzgOKjBdSztTequ8M4v\nvq0tucMV3d5A7MHQkY7z1LULqZp5rpkwbYviEHye+dOf7z+DSRj4syv6SeW5\nNzW31xcMzmrN3in0tAiy4NQuGCQGFjjhSricdqD9zzerhT629FfxuhO5pnkG\nH+K1JS6uV+VEwTmCXUMA5hIipvZmCDOQHJRe3Xil9CkkZ5KsR64uKINbYWJ6\nrr3F/05nplXQ4bjEEZoj52qKvJ2UItRosfM9ih34QIGYz7+9l9Jg6fTKHuiV\njSOYREP7YKOEQbzIZx8Zih2hkXECt7IXxD3j0ZOSLCQzFtp2RY2KGpNtx4dO\ncctkXp3KRHRDhzF+FmDDyhD++KGQTOHJMxUoi69V0NbgJkxGwk43BVK9z0vK\nOD6BJ2wsUuau25a8FUi9h9tzBgsIysNGqOn/nA6qFMoP8flhmk2067eGTfUA\nX1lWe28hH0iGYFQZOdv8OUxIAZ0AASgtNHMt1Zf60hrJyInoxVn1T5QrXSgw\n9HhsPKNE9yMNDy9PKTWAvek7UjdjEYrwx8h3boz6/3lGju02QXN7ghGVKdqs\nEczh\r\n=s3YJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqQXw0j0ZPHYFJYZjZrYKjO4/uJKm59T6L9F5JetunYgIhALbVnjq0OPsEaWzZV8IR9WYJj7dQiXQYVqGJEdMvnmP9"}]},"_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-drawer_0.23.0_1631568940595_0.8898688677309632"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9830d665.0":{"name":"@material/mwc-drawer","version":"0.24.0-canary.9830d665.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.9830d665.0","blocking-elements":"^0.1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/RcGgF/Y0cqxSGoGyd4s+QyYtV3sOdNwlp3mdXgcE+ac8iGGMQCx4toMRz6ez4OOKLMD8RU7IqZolnqUhCXCPg==","shasum":"49696d836502f8412c202c6c0e5e6c889f1ee9f3","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.24.0-canary.9830d665.0.tgz","fileCount":13,"unpackedSize":54309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8RrCRA9TVsSAnZWagAAAW8P/Rxxxaa3IsULkXSjgHfS\nvUsOlhE61BSWCC87MFgVUkzBky9cgQromDObUd6hxGyDkdZrIxuQ6JyUd+lG\nkRHQ2G5FDhbSjZXJRAFPqHrwbbqcYtwes6nYE4EIyC+C8gBGm6r9fRrtV7py\nW9s75Wa6oz8vS3Wry7ObwJh75khm3fN3Uj7v6eL47N2rqBApLUNJ+0jU4oqF\nyTYVrBoEAqB57bzGWUYzYc8zxU0p+FuyLpQqubOessfw1ymlXdt6k+NTa/5j\no4bJewhT14jjBC3T6qVPL44idGHKxPW+glbA6U5aMcjBNTvV4VjvuoosVJdt\n9kaeJpgA2hGkyEKvisSt//lVxIthwJj52nbYLnQ1Wvk6whBvubKMEGDQBxic\nJAhzhQua+zBOrye27Lqef5qt8Kc+Hfl1jLKRlraGucd7cMYgvjq4gfCnnVNE\nAMzPTKtRAOmtBfCCyaKmRTj2gmAh7WVpjTM83Cs6GibOgu2vM4PwJ5ebi5WM\nBTK3PPOgPtNzA3CgdHnn1Wl0Hwjx0F4lVQHKoczOyYYVNuez5EZ1expmy5T6\nUAkWSuGaCoNcu1lGVoNX9qFQgSL76oestg2ATjmn5CP4H+iqV6HTv5LsgBrG\n7a4BflxGrElrt40OwzXnfAu/tOeXYYszuoQ0sj3EmKCqiyZ2Hy23qL7Bjv4B\nlh5j\r\n=kPSK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5qFfjNWkQVVtJrB+Hz7bYq3G2HRlK7O1HPwiRgbbLiQIgAyLm0fHJmM+x6L+RXCQ3AB4mlXaGV0B4c1+fHLv3e4g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.24.0-canary.9830d665.0_1631569002946_0.8458795047382748"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.20e2081c.0":{"name":"@material/mwc-drawer","version":"0.24.0-canary.20e2081c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.20e2081c.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eLMSwj7I7+v20sIUzJlQNN5cR1L7zifLg1qj5Gv3iggYDluyJHoHGgxY8ZgdiQ6htNAt43K+OlGxuzgb7YWCjg==","shasum":"e474a6b4b9a9ab82a83703317dca736e86f54590","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.24.0-canary.20e2081c.0.tgz","fileCount":13,"unpackedSize":54317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP99iCRA9TVsSAnZWagAA5U8QAI7P9nCJsWMeJkLv/kmC\ngedZz3vQDshCinbWBhZFShDECgwNm6XAApRDaasaNJgbvurnDpOdFV9mQNdm\nrZg1OmlQIUL/uxdAvn1nSfLphjd1/fourFw2Jn1kSGNLkzGvTuU2Y37rhrFE\ngRPfYwpDxYiCcV8JHPfOigrtqYnEt0dTDDma+GjRizvPLwvAt55+c6jnM5jk\nRuRlXx4rc2d0+oFwXOeFz9IZiwzz4PVYGz4C0wx1X5qXSZtizNXv6fXwuuNA\nC6qLPpA4+2VnLZ4ZiCGpgB8Obj/E0XCQSv0jaHBbtGozVDxj5O1TuHP2wb5K\nTWerWLYWvGyHQyEZjwfWgEgGke3pm0SDMMTK8aINSMGSiHtDOpOhXhm4YUk6\nHAlKxhBXNhjXQ8dRw90aD+E0Kuib0kl9wh0lj6s2I7i6LISUtMPqACimMWhW\nhgcYjilcJKYo5DCRdp9dogn6sw/p0icIEdvGDd1rp7nW/CZOaPM227nCjIVR\nQ1d4+MRWLWvsWZohn8kwx0Dt1B3haGaSjT8/LQs2KKPKCsnyWAfS3TZgR+RB\nZdd4zBRcbBdsmahL2YWRodtpeC8iFapltWFob9MaBW2v/oqCr+w4OEQLCdRD\nabsjZ+tAb6Hzoi0Bu7VmrQy+HcXqKvl8nfNrZNCl8sq1FUPyU1lHiIHKr5c9\nAVUk\r\n=XGtZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC50ILxkrT0aIQ/IdTax24gzu+P974OxuKpM8PkraPebAIgT6XlBkKkWx/DFiLEV322GCbk9HFqW57XmWWN7Rz58HM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.24.0-canary.20e2081c.0_1631575905842_0.5200795679804717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.583613a9.0":{"name":"@material/mwc-drawer","version":"0.24.0-canary.583613a9.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.583613a9.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9wg5YnNG1wHsXsjCg2blF0noyjMcogktedu3Vm+rxShEhVPx5UOptj9aT6GAIFVQIyKRShXVAdEm/oM0s2nHig==","shasum":"b9b75f31c1ce78269be8438e94243e05f511a2d8","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.24.0-canary.583613a9.0.tgz","fileCount":13,"unpackedSize":54323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNPaCRA9TVsSAnZWagAAHx0P/3kuYOJ5jtyxwW6gTixU\nPylldo9RdL4W81P/gKrC3MJykMSpaCDtcZpny+tajuy4VgCtGPJ3STnnuB4u\nlVujoElPMKFwMaCnDhJ2mNsXGGGEIy5KyivS/xPomCLOpxqOOoijaIX3ulh4\nqaGp+EgjAzoWLSOFXfuYDUvCZFsDSi9FkNLwdo2GaLU69Nmb7Bm4A3hvb2k1\np6XeL7qqazwnpOjL2t+Qvkb/UZvWgbmIkVPQbY0n9SAjG9zsAUYlRPlkoa5/\nGmblpydoega/rdwORkKRIp++mlA/qlPHykdqt2XWj/hN1aAQ1bzuAkJUfRL9\nNTfGsXa2jlbRIiLYy/UwhjWHO8kvJWSwNxA2NivmjwLpODWe8AQHquWluGT6\nRbn0IgUyz3X0pUGScRWZi8gQZHqgL2EkSn3QT8NsBwQeQzziJgjzBzl5sBxy\ntOA23vm9sIOb03FHOjOUqc/aA5lwoKCjf7dpDz3Lac9Vrsn55rj/vClVN0SI\nPYOB2XADzm2F6eyoAS2pvv9aiw42fZV62Ch/5rd57wVWtXaGmulKF2fIVosB\nUunkjop6bpXKCOKaUY3mvTYRTgmPL+uPxVNIoI8Re3+fSQ7FXrTkXgY5OmFx\nM147aBSZ+U8/DJC/tHsPQD+moJHVOLQV8DQoPYPEVahI7bM58NWx1daokmmF\nse9O\r\n=7AR3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF9Bre3wW7l1X6uNtHQyEX/28/Nd1dTuQgVSZtLUtovJAiArUFmYV1+RAX6ngFEOKJtGEuel1rQAHYrzjaeeGOe5Jw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.24.0-canary.583613a9.0_1631638490608_0.32498074451827286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.0e1bd56f.0":{"name":"@material/mwc-drawer","version":"0.24.0-canary.0e1bd56f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.08398f880.0","@material/mwc-base":"0.24.0-canary.0e1bd56f.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.08398f880.0"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Qhp5KtbF6Ms3rKeZC/pX+2OsCxLRyJbVHDQLW7oe5vocjfCGBzfCd2UVYV2ggFW6Le1NfocJkUJR3kECMeCFpg==","shasum":"939c9b16316731b63acdb86d1373793f18aac652","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.24.0-canary.0e1bd56f.0.tgz","fileCount":13,"unpackedSize":54323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNyFCRA9TVsSAnZWagAAYAcP/RQaNiEPdgPryr+QwZ1e\nHCqALmNN/S6A9y93rH98QNkdc5cViBlZpI7V8MZDyunJH39z3/Hmz+eLkMuk\nK31bvFo0sogdhsBIsrjErfnJapZS+zHEcx1iXsmlEdUPXPYinngo54oViW4K\nyjPXm4/QtkJuBTf7+PB7vrltngBxyTB+67Zifqo20RMz3Dszg/NQJxlUUL6z\nznh/qJ+YHbeQa4W9b6xElEQWb1YTP5cJckZy5B3w3QyKGkdX2CSuT0A8vYCr\nx6PLyHZExqqzteOqn++rl2MEGGjAHXsBnO8RkABsqJ713XerpBnzsDqsOtk2\n5R7Ln/tq0eNT7bdMjDNWWsLWLOvxaiMn/R5I7tHOERDOGU+554GWpdTiVxvq\ntyMDm7+QyddT3ld2TAAD0kDkSXvsZUP7ie1Pnzfax1E+zd8Cp3AvZpU524Bs\n6GAcQ3b4kjGZelLcC+1mWK1D8PoKDEp9wqLoy4EVI/ilcwgy+BfqyGZ8n++b\nFWDSC/oMH/ryY5vFLcB+R3cFmEs4zM/m1pw9U8t9vCn/qgH7rMPB2L1EeLoe\ngVO/4iZffm42oVTbo+8eW63YPCt/ijWspWMk0gx+O7ACEAWF77ozMZ4fFEIc\n2GQLZ0PAMpGuu23nCpKS++Io6IvIr66hhn3NFHru7tQ1Us3lxAJKII46iNI1\naTo3\r\n=nY4x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF/OgEGfSFo0iw9aIdyvTrvskKKvN3Tcxs4qABLU3Z9kAiAQMEgf1mDnla7c4xINYxqRc5yUcrP+1Cnu1N6Ep9M5Qg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.24.0-canary.0e1bd56f.0_1631640709225_0.7156984709771979"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.7bb1818e.0":{"name":"@material/mwc-drawer","version":"0.24.0-canary.7bb1818e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.08398f880.0","@material/mwc-base":"0.24.0-canary.7bb1818e.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.08398f880.0"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7w4HW0JU8rTGOOOFsqebqTUgT7kFG07VjDHJe5SUmDujYbsm6nS3eIlvqPkECoxYtW9q7jmazabl+D1b6Kn10Q==","shasum":"0f0c51a8ff966af5b92a512c5fdd77c86b84d3e6","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.24.0-canary.7bb1818e.0.tgz","fileCount":13,"unpackedSize":54323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQT/OCRA9TVsSAnZWagAAlyMP/2voI2aRyYbJhD7E11Gy\nbIf7Pjf/PphyTJz/yP81K82yJoL6HkFsv3ld6ShHNP+S87TFIV70IgbSOGDg\nMZRh6TKbb8oI5N1z68kRRxfe8Wsb2gNv1MVYHGceNG9flTAGR7Lu8HuPNDWh\nioYKyTz88T0yJK5KykQFd5WtBoNUAT8bKN5o/WtsoZus/tNWkaQKu6X827Pw\nCIu2Opi7sZQvJRMf7fPaZjMBzSoNLJnee1jNoTLJLHOeBHZCrTbQXbqGqjNr\nVfeS4hCAgdsX8aXvgb2xMItj2dG8cXyllsZeR+kmxBNpJzD39fVsdlQ/C5/7\nZNU2plRw0yMyUQBA6TyXJ8U64fgyzZirpzuNFtsZ9KCcY+LNlPxMquNSbjNj\nHIYaQJS7wLFygqKzBzuxUhBlK8dhRF18hp45hmWYjCdgy2gB9xhHxDhWkyjE\n7aJ3U1f8q+YtRxiflVytcCcgAmm+LNWemF7l6/0C9fYuou6SdF5sFypzzMgB\nEN0YTuHMZ5SjwRGocGW4UC2v8CCK0aFI1Aa7yU33loNlUADXS5z8hu4QmqMI\n/448AvzZgVOt/Bf0H8OLamc6N54pmb06gTzlH+AIKlTM6h2Fc9e7lfNTEwtA\n6m9B38xUla2ByjKKKEj5mGINsBW2KBc/0gtiG/3kffUp+2TJUKoZtXtNMLUx\nVOHX\r\n=jGKP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHv+s7LARZtLlNXAglXp+wvxSPTdJk9vKnmpOSDLyR3lAiEA6tmeaoxvzVheplmEoUi5DkB3ap9BnzXHNYn58CnsMkw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.24.0-canary.7bb1818e.0_1631666125985_0.23029376562887438"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.b5e665a9.0":{"name":"@material/mwc-drawer","version":"0.24.0-canary.b5e665a9.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.b5e665a9.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XUBAHE6flfSTg/VwiQuJABKjoEvPbuzKKu3S2MFH8sbu2409lwF4dsMAtZLpzebJqoLRxY20x4D0M3kunDEWyA==","shasum":"8d73b62e7dba27abf2051b82286026b5a33b7341","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.24.0-canary.b5e665a9.0.tgz","fileCount":13,"unpackedSize":54323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjeeCRA9TVsSAnZWagAAa20QAJ8bm18oCv61fzxoQAkI\nwI3I7/jwvbuCCiyVJGovcORNkVmjrceDN2lD0Oa3SUBXM9QJ6hnw26QBQPeJ\nz+/L9E9gmt0THZCxcoehkiFw1axa0eMjI/oTTb5uZNe1aRbeBjHUGFp+yqe7\ngZoRQh0FU8qd0wEZAFcxih7I9ks5R1jwJZbbvp36dL9iGp4olyRQ2ciCgnWr\nOBH1C7P/QYq5Xwf5l4DTkauIlQ4l7FbkCdYRR6AxUcLM1UKShwrRL5huNmiS\nhI2qqPu+zOvC+Fh6fHj7gFjIMJyMyHehPhj9lEzQJasFToj/E4iy+R4i3Q+5\nwW8kS8mStHGyIhZuw0yXMplHOdpUta82jlXGT4hHynyORMFFX5QL3wmTPV6Z\nU7pM03wPTwUlQwl/paBa7dUad2nMqiYrQZouQWlgE58WIwkPibjMRikqo37O\n8hg2Y3Fhr2hNsHIWRWw0Ns6VSEKJ+1Tv7xMG3tPjEspa5ARXxAhcTMYrUyPn\n33n3Hx8t9ychDoa78MqDVXStl1jVY77DLkcWj3VEYBg9/LDXOQhT3VbU4Cvv\nxEANLOVemcbOQ0Ig0ErvJ8xSElb2MRrdonsOc5R5lRjRFLx/TwnVtDHAkq3g\ndkJYqQev34xtm0EX3Wpk33sD0Uh8Ad9dyJWhV5EyxPG0QCaBWZNocFj9GFtu\nQa9Y\r\n=cX4f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxURXtvr4IyKjmT5f2lIoDr5Utx6ksXOZW6pO3eucA/AIhAP9N7OKmdBuWRXyYDKgObivfXlT7J8+guBErx7LEV3js"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.24.0-canary.b5e665a9.0_1631729566748_0.5421578955251041"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.ab1e177c.0":{"name":"@material/mwc-drawer","version":"0.24.0-canary.ab1e177c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.ab1e177c.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tI5KDvSQziFRLXvMi4F78RB9YNLZWuEiRz73hhrvQsgmP6bbac405FFtrhOFxfHU5rm/RPAL3fUc0PH9LEj/7Q==","shasum":"9a3090cce045001c4a716395959c5aa7932839e8","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.24.0-canary.ab1e177c.0.tgz","fileCount":13,"unpackedSize":54323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj8FCRA9TVsSAnZWagAAH24QAKDPJ4V5pDl3JM3datfE\nPf1v49t5sbu4iNxJeL3jzZw+IH/cfu69VE2KIVDabGbHehvtEcdxbY9CQpmo\nYwrhpG8W2+0qsNCyYdKlVbHm+CW5JVROPPCMqZowtquXWCg9wuyjwzQYhYVo\nq8NqTN3a1j0UKIk0fKdmB80QV0mjNb89fWXcAS37eYlv6735Wm+wNlBDETyb\nEmCGdt7eXg1xyJJcsz9hku+fHDle+6q1mytDXv78dh5J02x+Km6fjNcLf845\nN8yxPL/zrWoBzWDKAdKD98A9Kc3NHKBy3Vyc64CiNaNMl2US37ahFic8ZkU2\nV5fLcDxyYJPJ+fqWctK6D92MXQSsrb8e/sMsydyPQg2UCjelT5ae7jqGJRlH\nGGVnFjfcovE2CEu3fxYQEHmqNs+Vxvs+MikXRcLhKnKcgGA+uIS5BseARtjq\neEu2JB0jl16SuiNddIUyxVG6aiiI+XZtYTl5gE1XmQ0yXaZFMKYp8s5v6rQB\nXNuYezvjQB47J2IVeiA4DANFNjfbIpcY4aL7IBCrXx3f+dCmfR8q/CJyMii0\nA5PMAkirxdsBM40eyR0F7IjiDuuFvQI90Su7QpFeIvsZuIdczej4Cw7NYNiH\n+38thbCuzrQTpErIiuDfmA8m5/dCYrNNZqwYNANe9MdjlzhTL6beWJDQAeJF\nhIT7\r\n=e9I7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdn14+FSrhK7Pa0WzdzT8By6QFnGfY1moAyHy8NCWoOAIhAK43R6TVCjqkv16geHdL20xEuBXMhENzcq+J8adIKh7J"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.24.0-canary.ab1e177c.0_1631731461680_0.4326057112467083"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.8dff8894.0":{"name":"@material/mwc-drawer","version":"0.24.0-canary.8dff8894.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.8dff8894.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZcF6brPayX1JJjzWBlRTLSEAkPec8DU323vVuH/H7QYc07ESzjel+o/ZNgjc3pLVjkKYSVCKsUmJOc3SU3Rlzg==","shasum":"72b062eaf1bf526ec9ed76b52709537744b2c371","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.24.0-canary.8dff8894.0.tgz","fileCount":13,"unpackedSize":54323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkSaCRA9TVsSAnZWagAAkQsP/0cbKGIqbALxKDe52iTP\ncMVuG5AG21k8+zMHLV7vJi42cpWbVZlKQdur+Co/WAYJUglGl4uX/9dkbUNY\nvzynlgFSR4e2jAm+NdobJ2Cq69p7Xu1eYt21fvfrK9kvZK9vSmaHZdTUwlrW\nLwUmnWJAIyZWUbIof6+5EoxYj5wio/njKWHukGfdSXd/bQhvosSj12S4V+vz\nXBaB6kd8ZP2w/t54ub1THGTUVRGXpByONcyRzVAhHAbzdZCJ4x4J5SENHAL/\ngbFODMloRa9mujmlytToriM0YJhIsDMOw58E611/LdJVvn8Pnp2TbSI/ss7v\nj30JK0cNVrWWgy0mHpmQYsqT4nV9WsO8TNgz1cUTXRtu8aBYhASWdnA0rNtN\nhLwcp8dOdox0j8fAKN+Fde3ACBikO6r2WLUWQRvZPq2LhQfC/x1Cg3OazK64\nmvbSdzf7ef30pV5EjknVl7zL2JCP9Sj+1TT47UejA7u4mAY/ewzdUq06Lpfn\na1ND1Jz1mLckafyJfI4Ip1b270BOOgXA1X+DLwSKWAzyeRRC3aWSdmdKDP+X\nQ7wSW2wYk76ofBiW1SbDZuS+ELLDrEnQcQiULXOdx08T2j2rij7PE2OHv9EY\nZo+SVFRfiSR5oVVxGieoYUWcvFZOvaUXT7SMUUyP+oT33BPLseby72tbDghZ\nc/o9\r\n=Bdtn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFZPqb9dpEhOgBddb+kaQHDMw/dP6zk+PD7mE7vl/jS9AiBacSYhoU1hZaICPEKj8iq3Y8Kblqb/YrY2Nz6Me28mPA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.24.0-canary.8dff8894.0_1631732890661_0.9712363073222043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9cd7e927.0":{"name":"@material/mwc-drawer","version":"0.24.0-canary.9cd7e927.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.9cd7e927.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-w82YLozTIEotJONFCCMc6POSbrxD5xsbyEdVOfS6MNjlhyavajVZa8d9CedoKizythWULhTAgb0nnSpIA6GGIg==","shasum":"1de6b7aece9348aa0559d37eb80aefe748cc9b3f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.24.0-canary.9cd7e927.0.tgz","fileCount":13,"unpackedSize":54323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlgzCRA9TVsSAnZWagAAu2oP/3U8iF5XlaH+mL5AFCVk\nB6XNc54x6M3pUpEWfKHMnWLvxtgdkaJGdV2BgZiAT8vaiCuyBnbjrDWd3tSk\ntIjEGS4kZB/cat9vzBBzW50tl2lx8iOceo9Oe9zQTCV59z+LV+G/3aSVVRgF\n5inW/ocb6MZJjDK55w/UZr7OoOKgiTY4lq4OCq0u5L+MsqmBD9YdeTzqbfJA\nC4Gd/tb8qpW7riQoGKrRi+VzDs8qvUiv7aLjfNEL8HAReZYwu95uaSxlkrPq\n0YgHDZQCBBaBjq/+lCrYZdXVQ9ZHWXzPMFL5Txu1tgHMmEbDFUdOwX524ER1\n8OhBcZVLvPomidMbiRcOc2fjx/7NmTMnCSBGVJ7mE7ky0jYq2TQcSNlmzxiH\nLAohmsCXnmwvWsqS9HkC+3s/4mEClmPmmNpdjZkA24riZPujVy3xlagnK7wj\nM6mTioo065v6JvNEZwWCLmLYgd6Ee3fN69sYACuV/08qu//S4QMamBjV3/zG\neAjF9LtpUdMkmzGCJr7nmiBpSY32/3uzwVGCxHM26h/5DG1JMLBZBcwkTvU1\nVuwisiDLovyyZ7uu5bCdV+sJS+d/Xx03ryQE15gZ8abshvL2WaeUmCPo3tOe\nSwG0syMqbvhQiP5AXAaTLGxmhKnK8/KSEAvDo0y2Nx84w1/AvdoLBID/3BSV\nqKnL\r\n=9gAb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGAnHOgTNkIU9P2VTIM2/P6uvxvFNiRnBUmITigKPdoNAiEAgAi0YDkR7QvEHe+GnObq1xG3n2EJFq+HZUkk/hvE3HM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.24.0-canary.9cd7e927.0_1631737907158_0.17802161662723814"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.a7132082.0":{"name":"@material/mwc-drawer","version":"0.24.0-canary.a7132082.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.a7132082.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-t9iZ6kebfo9axz17p4T1my/oSBK74KLQDOjqL64PYubRJRxBMjcwaSIUJDSk7igCQAzOEUes/r0NWycACr2uPg==","shasum":"9daae833e3fcbccd151ecde6aff6c35f93772ac6","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.24.0-canary.a7132082.0.tgz","fileCount":13,"unpackedSize":54323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmlrCRA9TVsSAnZWagAA8YYP/jTAWBp4JsUnP+wumzMm\nhWhGVoXqDKZwLbHcPDgpt3vrUvxLy3IA5bI3PtVHfIgzGiZaex9jaFIbdKDL\nu6V0gDV0lYG7x+bf+x9y6wotBt/OMoHEXjQc59Dc4H1aXOpQFqgw+VeBXVe3\n5bxkBGkx5UTD2e90hiu53xBdabblYgvjdQeBj06i4hGrCp8lb9WZIZIlBY+f\nAAj2C6iPPWioO+GM8Q7Lu2NtW7aeYhV7yh7PBKXB+KGqChcMH2Fl+agxRpw7\nz5PWGQ+B4xCBim3u0qk9Mom/qoEPsgWeOJTYLX3vtCtu79bv6lR9EeDlGiwc\nAtKKSGcfk1HdrExboaJafR3aGTXnU89deTY9Sotd8Rxei1UMTqmlbWfJeyjC\nnKmWq01DYhoesHtAipOSN3g5I1r+3WIgL+tHer2gRlSHRRMKF5ddwz/kq7Pb\nI4lD8jMcm0Zev4ZM3sNhYvGri7IjTsUKZ4dUfAfj9foFl9P1goxb1ZHAO1Ak\nIPNFvezG97CxVqy8xhS8ref7rvKeRCJ4xoqfkrXiZ4ztv3OR3XsPY2X8FYrB\nni5tTEfytiaEggsOJYn/mHikJqRfzEnCe79j9NoFRZf7nY8LhPOws9cWLPY0\nYAqnEXjpVC9leAEoBSRD4njci2J2Fw+pY/J1Lzr2gTPl9waLX8W6pAs3UaNy\n84D4\r\n=g+yo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGLYo3TVayni1pxKsY75KOkSSGIJDKtUsM1Z2pxOYdvRAiEA3TGyTA0TdTPWocp+XzGYUxFEnzx9ZeWQKtZOJA1xaAA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.24.0-canary.a7132082.0_1631742314610_0.9056204122522569"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.cd9110cd.0":{"name":"@material/mwc-drawer","version":"0.24.0-canary.cd9110cd.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.d4e16a6c4.0","@material/mwc-base":"0.24.0-canary.cd9110cd.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.d4e16a6c4.0"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-45186sok1En0ly9b8YMVwRwkj3NtVH4xTovM671Q/AmdAG9jh1yCcNMtDYTdzLPJ/DGX3Jnsqq3a1kSKnsbANg==","shasum":"e9847e4a9638e9f348c6846f68df9407775d162d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.24.0-canary.cd9110cd.0.tgz","fileCount":13,"unpackedSize":54323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4KnCRA9TVsSAnZWagAAySIP/A4vSl0pyntFSj/jkXnB\n0GjFfp7vnJ83eoR1N3RSWGjyvw9+XLcQ4MIY+XIsqJQNjb18609fF/0bfdiT\nS/jXl4QlRVzgEuShojHvNccbK2hcytfQMa7bA6R8tWsis1HDaDAemS5vIRps\nRuelXLqAyXozRyE7t6r/pQFZzgJXeD0OH/fi5RC46tkvbEoChEo8Bchs2rMh\nlstn34UhPfstEk9CwSmWgzzuHncvnF8exqlb09YPxHnkGJ5YaAprWt1nxOuP\nZoL0B59cOoJyJi/e03vmmcKQ5Ah+hNIL8oG6UZAEFZP9LXBsCcn/cExVPd08\nfufEj7OYHaCs4n2BHTElwuQaCUPSvzeVdAI54bBJT+CpIJOxgY02Q/t0DQ03\n3nNXWdM1MLNG/mmOdaraFaMis83nwmFfo1Vl2SRBWY4c4Xg6dKrQ1tWfm2LF\n5BtNr6fiJrPkPfmV6CSeDKuD+fJeHtnEQQ/SYms1QGdBDFQa9jk8bcYKXAg4\noir2RWPoUiWlsKhBQNMe0HUguz4pCLfwjXP6nm3meXPwsLFp7nnUatvP96kT\nLCGspaNQKeEkGTNmTJZid67b0xuNb+jTfW9ORZLVIZcvpbBOYETiclBnGPz1\noUumsFD9g9V9IYyvqVIiXYw3RJJkWhQ1APoL8qbIZeq7J5/pfOWN3F7EGNh2\nFGvA\r\n=kC20\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+F6PMS2WX3eOdWHdbOLceg2tXUCqTaXVmauHTHiWZKwIhANZPP+XxP4Lx6zpSgHKJtVUjKpC1Y6G8vTttzdHQiRPF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.24.0-canary.cd9110cd.0_1631814311254_0.10251599281995838"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1e5a9883.0":{"name":"@material/mwc-drawer","version":"0.24.0-canary.1e5a9883.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.d4e16a6c4.0","@material/mwc-base":"0.24.0-canary.1e5a9883.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.d4e16a6c4.0"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-ysHtwJXZ4YgE/njI+MnT522UPLGHpO914MqpKk8TT6gQFoyiAQMERhW9hH4fPdjWR9Rl7uz4BjkHGeBop3E15g==","shasum":"edf60328367451ece66a0d0eacd518b4bd448e25","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.24.0-canary.1e5a9883.0.tgz","fileCount":13,"unpackedSize":54323,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGToUeJyquuV4gMto9zHjBfRo1Il3OOU+mcZpqIPf+FBAiAO86+Et+VYRGLl0QyYEsVwOU6WKZ3SgGlfEEfvcQuvVw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.24.0-canary.1e5a9883.0_1631911130637_0.9174885698901822"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.32c830ee.0":{"name":"@material/mwc-drawer","version":"0.24.0-canary.32c830ee.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.32c830ee.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-mGkS79oxoJBDsmPTckK5v4LkGDNbxq1nNgyFgGbGj4/5I8nJC4O3Kga+igj9FGrUkvd2KnYUd8PGcpYkePMpOg==","shasum":"9094069cf86c98e972c23f9f1f83cf9f68de223c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.24.0-canary.32c830ee.0.tgz","fileCount":13,"unpackedSize":54323,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBfuZDqas75rZIw3Ch9egDAU3+vZqyRN0SX132lp/ITCAiAgI96PJlESGchcjohsa8aPCbQ3tOpAxikdluZ4jr34dw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.24.0-canary.32c830ee.0_1631920107650_0.20383341798476162"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1de87bb7.0":{"name":"@material/mwc-drawer","version":"0.24.0-canary.1de87bb7.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.1de87bb7.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-GqNf3B5Bwn14q7lrFuAa+6R5zk6NywJgU8dndJs8eubiBveVBa9bgqo2XJFk7UWM9A1otSZDHOrWl8nz/ShoVw==","shasum":"bfdf63c5121d497c0e76d878b29f13d118d2f50f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.24.0-canary.1de87bb7.0.tgz","fileCount":13,"unpackedSize":54323,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHxOtQGJ6m7PRHXu2VBFX/4AmryUDCX+Wgj1ixiur1BCAiA/0ggK64nirXlcVF5PJYcENgiRgqtAI/DpZgq24s5hPg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.24.0-canary.1de87bb7.0_1631991113675_0.7750796031542044"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.f2ea80c4.0":{"name":"@material/mwc-drawer","version":"0.24.0-canary.f2ea80c4.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.f2ea80c4.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-A/Cvm7d+xGLWkyOsG9T1wZuJvxEr+Ox5tCIjr635fhpb2Bg/0ut8oYAcP/vsNdsHv7hA5UyOgzSWedg7ox8Uaw==","shasum":"b58abb1746879409c408ebd9fb5f95a15a1527f3","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.24.0-canary.f2ea80c4.0.tgz","fileCount":13,"unpackedSize":54323,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLoaF1miJ8e0utLr8L3Qc9ESp/7LmsraivQQzhOWhdpQIgYB4pux2WmZJ2jzyEak1Ipx9nhnYwSU0WzodGr2E6B/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-drawer_0.24.0-canary.f2ea80c4.0_1632160478203_0.4708954446560234"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.569d739f.0":{"name":"@material/mwc-drawer","version":"0.24.0-canary.569d739f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.569d739f.0","blocking-elements":"^0.1.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-TibDwvPTGC6T3/9ukTmjP4uGJDgxr3Bis8s6iMe6QDZJTwoIvyZqz/GaLAbN2Eg0KRRHtxFyocpuyNi1qazDXA==","shasum":"af422740fcf0b5169aec7d193995a5fd796378d4","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.24.0-canary.569d739f.0.tgz","fileCount":13,"unpackedSize":54323,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBTSfim7Ji24w8X4I/zGmEd7v8vtdIFb9FcTk57DbsVrAiBPPGmt50/BeR4NR7COU7U5cyp99p2tlFT0gIWT2NcMdA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.24.0-canary.569d739f.0_1632173002641_0.1059580446536661"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.5a434a50.0":{"name":"@material/mwc-drawer","version":"0.24.0-canary.5a434a50.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.5a434a50.0","blocking-elements":"^0.1.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-8CXCw6r964tJTh5+jYdCEyE0X/9ZOFU8FTsalfnAmGo3qpSFDBlM2VkIHGvvOuBj0Dc7k7DWJUBiO0oARG5u7g==","shasum":"e218b783a37c70afb846293cc12547ee4ef8a937","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.24.0-canary.5a434a50.0.tgz","fileCount":13,"unpackedSize":54315,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGeyZXum8y4WO8kVs2uNx9clZctZRGBiO2yvIktn5xaNAiAEIMLbFD8LEafFHh0aahqu5P/O9NH1+9GNPPcm8IC8mw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.24.0-canary.5a434a50.0_1632189620711_0.2916533636191283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6be1a13e.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.6be1a13e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.6be1a13e.0","blocking-elements":"^0.1.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.6be1a13e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-FQBNO/9j73ExQtYEc8uUs7DJfxr9j/CXRTsvsfFybzkAWi2dpdl3xzr/OsW9bmoKQd8xxvApiiajlVchsccGjg==","shasum":"d9e002332691f412c1b10d864adad0f972554bfb","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.6be1a13e.0.tgz","fileCount":13,"unpackedSize":54315,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOlJ2cvxBCVzp47W3+1Z+BCfcXLPIZSV30rOGu4AsYoQIhAO/hBaCmtFaXpQpKFb+S1Zrghs3MCAoc2mMasMy92hoY"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.6be1a13e.0_1632192767245_0.19041061334798837"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.0":{"name":"@material/mwc-drawer","version":"0.25.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"^0.25.0","blocking-elements":"^0.1.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"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-drawer@0.25.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-JN3Tlhs2I/ZAI5PXsQBwjNYBhvoh05+FKHHacLU6Mew13rfaBNTE+UhnW7cvzKeiOJSqDwREXMF4cAgJ+3mZmw==","shasum":"840bc47b723f1b24afcb59928995f3596b896d15","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.25.0.tgz","fileCount":16,"unpackedSize":72605,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFZTEzhU0BF2NSwZ2wYUMLUKSf2jUoYAlK0aOFIPc+ikAiBrcYqvmD49AAypuU9Vq2ecagb++dcgXV1PAi5zqjOTaQ=="}]},"_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-drawer_0.25.0_1632192779947_0.8757759481268723"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b1c1ab52.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.b1c1ab52.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.b1c1ab52.0","blocking-elements":"^0.1.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-E2kQF7La2oSbDzEvPavM2/SBa554dIdLB2PB4AdGDiLC8ufR86Hq+JlphjGnIpIFxlS8MtT/qrEDSpWDtnuo4A==","shasum":"90e772aed50c5b8869ee16715244f8f7e5752cfd","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.b1c1ab52.0.tgz","fileCount":13,"unpackedSize":54315,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcm2Un2l+j9tiJFnjzLwfV1+hIH0JXV3gm8i0JDAKcWAIhAKQbKRCMEYr5rtbJwn1zU6h5OhmDwGVW+3StiqAeNYGT"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.b1c1ab52.0_1632193914939_0.06693276719118968"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-drawer","version":"0.25.1","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"^0.25.1","blocking-elements":"^0.1.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"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-drawer@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-6IFeKfKriBgH9t2Qymp5LYODlcUH4KAlfdfmzR0PNe2n6s2bU/wiJW4dHr9JcwsxtbWNcHS35EJeYIFrYrSDdg==","shasum":"911072c248b58684740d23ed4dcce4e3552c7a80","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.25.1.tgz","fileCount":16,"unpackedSize":72605,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8bhHp65RdypQc6Zjl1bunHswgzjbj4F3mPl/wahbbXgIhAIlFcFVHgRcMrptT8xa23lT2sPyobb2ym98VIIi7DMxn"}]},"_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-drawer_0.25.1_1632193958521_0.3744720939761874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ae060177.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.ae060177.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.ae060177.0","blocking-elements":"^0.1.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-TtDUMPdg7Vnzh1M+lH9zVTKvpvcPXpyD5yaQAni0N7GYhy5gUGrrWdoQc9H2HkQs2ILY6UouqdtPrhNk/mW5SQ==","shasum":"667648fc63623be807714c1e3a491d14a38e538f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.ae060177.0.tgz","fileCount":13,"unpackedSize":54315,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEEjUhUexTc1et7auVp2MDtdq18qeDyHquCZpC/RH4dyAiBxWkX/7duBalGBYz5QiDteOxcrMvDggTac0nais2DduA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.ae060177.0_1632235070182_0.3908154285559402"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b6fe2a12.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.b6fe2a12.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.b6fe2a12.0","blocking-elements":"^0.1.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-IDM1/3l5b5/uUimCBuZN+11iOZAKuroc9ufzPwebCm7rKC2uSd4x9FLKyWnePz2sT0KpbdaKXNN/r3FjQfR1OQ==","shasum":"d0aa427ea98f07d121596491976a6be37f9ad5c6","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.b6fe2a12.0.tgz","fileCount":13,"unpackedSize":54315,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUIUgq3mei8+NgRcXjO/iQGEjO7Pu/B9WdDuPtnCtg2gIhAPZIThRpEc/YbzrUx2G1eSTXuPSvBQLEtg+eSEwUB6VK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.b6fe2a12.0_1632341759821_0.9462828782775881"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.07e91417.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.07e91417.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.07e91417.0","blocking-elements":"^0.1.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-kbCq0BgFSfNx46glaNA+KUswuOiC5JVmK8BGU83LO6t3ht1Y8qHydsTlVrg3adxsRWAFKiLk6mPzK5QmeXGybA==","shasum":"8420441104b824c980e6f761c38245e95014b8bc","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.07e91417.0.tgz","fileCount":13,"unpackedSize":54315,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVvbRNmjm4E/AlrEjpmljhVQRUBHXS30kzyVu6521TjgIgHPMC+wOV233PK4PCwwgQEh1lH3+tO/xHlcBZA59m7ck="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.07e91417.0_1632344728095_0.7271661537474152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e2203ffa.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.e2203ffa.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.e2203ffa.0","blocking-elements":"^0.1.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-vV5aSH/HeoGTIppA2KWd/Qd0226P8aRo7qy6SBeEIEndyAnGVqEgukIe+CjbeylW4wKUYcqn6E0S+Adcnffbig==","shasum":"de673a8df2d1a3a58dc5f41a28e42302fb8dfcb3","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.e2203ffa.0.tgz","fileCount":13,"unpackedSize":54315,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHnoZJtHiaMPWH9/Gb3Qb6DThgBvHQR32StkXE389onZAiBw6QTzgCpTCWvUBVA/Q3Q3B/YKvxdMM/ftPth5cVV3YQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.e2203ffa.0_1632421639434_0.7428245926354982"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.4abe237e.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.4abe237e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.4abe237e.0","blocking-elements":"^0.1.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-Vr39zuUKcnADk+NkIT9rpDVIDHMZAlZAaV1xaGnmeN7wQdZxYuKITf+vYVxttsCdLUbz/ch5oAHirJaF8epmkA==","shasum":"17b0455f0eff3a1f04d505d54236a9b75c331ffb","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.4abe237e.0.tgz","fileCount":13,"unpackedSize":54315,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkGy74dfHGn5+D2twZ68t8GfHfT4pAHvrdY05biyGivgIgNj8O8I3C1L8JtlnS/GGfN1Z3grynP52z7Mbf29jPygM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.4abe237e.0_1632504650204_0.004198684438420086"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6278ee5d.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.6278ee5d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.6278ee5d.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-qYuAlbYtza7j5AFQ/LNzVXEhbQWomGj1/S0YFzlGoXhqWFG5btzDqUWhmeIWyAU7Rs3fAS7gVhaV0P24vKz1cw==","shasum":"8118854d09cf2e686fc4826d0b85da4a6bb089f0","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.6278ee5d.0.tgz","fileCount":13,"unpackedSize":54357,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoYMur/Xj87SnHV1r/wHaGLbKcteribAcP98Y8cEMVaQIhANZe4vNuSd6JZ1a9Gg2wuu6lFZNBJClcIR//U19TN6RB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.6278ee5d.0_1632767465816_0.8303937327426911"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3a5d5f34.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.3a5d5f34.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.3a5d5f34.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-E71FB6l+841kRivKWiMTXo/c/niwIO7ytvfRnBljLb6kmv45im844RxXKQWzOWPkFxdQXUKH46Vfrd7SpdYaZg==","shasum":"f91509b810814daed5f862ee4dacb7256a3cc11e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.3a5d5f34.0.tgz","fileCount":13,"unpackedSize":54357,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQDOGooYVL26EihKpSlSfn+Okve8NQiHPrznC1nUMyyfXAIfBUMT5r6ap4aA4kZV7LQvabXkhyDfOLS3F3whQz8Cpw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.3a5d5f34.0_1632782474713_0.42292426815089423"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.143ed3c8.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.143ed3c8.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.86b50ef74.0","@material/mwc-base":"0.26.0-canary.143ed3c8.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.86b50ef74.0"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-HqNrsHJ66J2jStIiu7WzYaLogbX7UK78B/gAE3jBA3/nisIXi9LxRG07ww8p+Jxp8qtorMnwuR7GPfh4yPv0EA==","shasum":"1f5883d34feae5b18cb6db80aa58bb2e107f8ba1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.143ed3c8.0.tgz","fileCount":13,"unpackedSize":54357,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBbmfSnik0i+GIHj9BOfWSF09OvmKPXnspZ/WWO9MVExAiEA8I5P3DNHrXD2o8c9b9nBXn2N5EIsGArgQ7vM9ZwiK1g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.143ed3c8.0_1632880234104_0.22299786865874371"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e5923d68.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.e5923d68.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.86b50ef74.0","@material/mwc-base":"0.26.0-canary.e5923d68.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.86b50ef74.0"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-H2jdLYxgXFL4HKBcnl5l9N4MBYBTc649PtraGbLPy51NzgOoxlPzfkj8f9bQqxFDNr1aePuwq5NNemywrIU/3Q==","shasum":"061b58e4be5dcd6fed7a430938ceec9ca0602c84","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.e5923d68.0.tgz","fileCount":13,"unpackedSize":54357,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBcLrXg5ZbuMcR5z8YAumDqqC4U2zdWXVRLZsr8UWga4AiBF29xEbvW71jGpXgEz5lmip8Gvln2AljIweBcyBjVVkw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.e5923d68.0_1632960331736_0.6147131575279783"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d8ed5109.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.d8ed5109.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.d8ed5109.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-u4ox58Eg2yJxuBFhBZSjSM+HrEdaODRnn3JSyNO+KV6gCWibZEbqnfm1WNrQrr0NZ2Qq3ko/okB0Vhj/S1J87w==","shasum":"eb695808193d250b66d1ae7b1280493905ca5183","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.d8ed5109.0.tgz","fileCount":13,"unpackedSize":54357,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE17CWGZ63IO+SGnpFMT4wL0LDeVe0MCob0dREM+4mvlAiATqGJxdG6F1s4oRIEcWXA5DMKqiTqv/0ua9JPQKw5NIw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.d8ed5109.0_1633044816513_0.84567635372041"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0efb9c2c.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.0efb9c2c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.0efb9c2c.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-x01BzVUbmvWuPW+mjxAN/aQAilByuI4tyukPaDF//f6LIQtYirkGkMHsEK6yETAqsM11lpkKwtGIyoZmq7uqhg==","shasum":"609d50a96b0acadf1d278241d5f467f0007fa88e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.0efb9c2c.0.tgz","fileCount":13,"unpackedSize":54357,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGxnbqJlzCTRPI+xSfNy8rVffem98murcK06VqrVDxIAiEA7EWdFKWt+UPThPX5aIM4HDm24pWPSdvCahJZBHRQsLs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.0efb9c2c.0_1633140479013_0.49867952403254323"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.1c9adcb3.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.1c9adcb3.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.1c9adcb3.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-vfpVnCLrgG8mp08/C/pZ1x62YWoOGeO3yIdv539lYDzrUJF2pnyhwB+75QC4b44LpWahKB71OggC3YqVXdrRHw==","shasum":"b39fae72cde7e711756544c70e5ae3bb7785c9fd","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.1c9adcb3.0.tgz","fileCount":13,"unpackedSize":54357,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEeDnc0+iRyltx5XLiPfAE94oob/ge2xumsQXOoD/Mm7AiAajkfNzg6ry9hgEkGZHUsfFpZCveNDSPv20m+t36m+Ew=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.1c9adcb3.0_1633368796301_0.33851199304492563"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.dfc00d60.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.dfc00d60.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.dfc00d60.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-XshKz8tZVptv+nvZBu87w2Fm82cMm2p8Zhj2yOiBCPeTIi8lkEyK9FGCrKTOjbHKUejPfCJdKev9U3mLWxOadQ==","shasum":"875569a552c1202a0e258e0d22fe789ff8ba1030","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.dfc00d60.0.tgz","fileCount":13,"unpackedSize":54357,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXfddmL6XF3aFU4u/BOp3/NDC3zCw576fIiqSsF7znpwIhAN5wtcLE6zR4/JmYyF0vswDytVLzxUgBzKSyvFC5pAEg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.dfc00d60.0_1633741019067_0.3747028223844173"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.c3aa844c.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.c3aa844c.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.c3aa844c.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-EEg+FzXWrf2z28f2y2WPzzQBUosQCt30ep6NsuzaTh0llTRZzVrlRCswrkBZXRZCbj9TBimOUgmBEfh33wh7BA==","shasum":"80282ea89fceee3ccae9592dee11f43fe8562c8f","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.c3aa844c.0.tgz","fileCount":13,"unpackedSize":54357,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGtMlAeJPvaMCju60jV41oZZd9yy8lkwtZYx/kg8EQLkAiAq165a1hoUbUP0XgkbOf4ry4Y2KTIPZfZmEObJfb2w3w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.c3aa844c.0_1633994045338_0.41684553476659536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-drawer","version":"0.25.2","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"^0.25.2","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.353ca7e9f.0"},"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-drawer@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-/p12wViOAwnDODfYSjc9zljuXv/VYjDIeUTbOTcOm3fARy9pB6Soj7EcLzmjUn8MpYseNSioZNWckdAcbDWrew==","shasum":"24ed9a0291b1b4bf11811fc8397770cbbfd7c818","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.25.2.tgz","fileCount":13,"unpackedSize":54322,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC30uSW1LNxubjT4gzNiyaj3QTeJWf8Sw2icI8rEKSSygIgCYBza9IBrHrzgMOIcUDHBClzMKHloqtPdeQPoPcvCf0="}]},"_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-drawer_0.25.2_1633994309232_0.6254420143596264"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.406d6fe1.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.406d6fe1.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.406d6fe1.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-E24MBeMg7FrKnuN4z10Pi/i+GN4Insr6jwr4zN+vnuE6WGz/Lv9jpSVYsB4rhNPeB03i5iffWwq8np14428YPQ==","shasum":"754f7d40afe3222606d80a2b98f7807de7fd1592","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.406d6fe1.0.tgz","fileCount":13,"unpackedSize":54333,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDs1IroLvWMRZriqtSLMLNXb4+zhHfG90wIDzD+hYZQzgIgArpl/mmVk2F9OfNd+yDYXa5r7+1kYqb/fV7dFJ18XAU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.406d6fe1.0_1634158750455_0.1193470974049664"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ca0a674f.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.ca0a674f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.ca0a674f.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-+t8tUE/0NX64lz9HRHmfCcOu1REc4p1+ew6xfuA0xK2la2e+H22ZLMSw5W2cGNU3Fnoyynmodt7qOaMTmLl5YA==","shasum":"d3239661fc06f77e98641e575c332d317e14ef11","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.ca0a674f.0.tgz","fileCount":13,"unpackedSize":54333,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvhlk4/9C91uEMOWViq+nT77cyDg6aXKNNmgNn5EU2yAIgNAnVW43olj8QjpqqRBXdUYZ3yHzkxN6a0OWqOcXYp34="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.ca0a674f.0_1634592995443_0.6418589509172916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.eefcf660.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.eefcf660.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"0.26.0-canary.eefcf660.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.261f2db59.0"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-OmfmpqWJpanYA9U1TwDFFuZgQnxrCjzBo2kn9FEzdRtdzmywnW4FSszyQLRt+Z5pS9iED3FaYhcTFnV6gOEVug==","shasum":"40ddc70a3b8bf492b5efc7114c11e3d6717ad454","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.eefcf660.0.tgz","fileCount":13,"unpackedSize":54333,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiqpYWs+spILP0Xz8MnAn1/odrll7yqi5eam+vF2gtdAIgbVorO2R4FQPoa/gqnEcAkSURonUNIv7brIHlRhvW9GQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.eefcf660.0_1634765001353_0.7473158318937143"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d21acc8f.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.d21acc8f.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"0.26.0-canary.d21acc8f.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.261f2db59.0"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-0r1gy4SZXdwA42uj0d4SH1xCzM9QvtZVPj2e2+XsgaP+qmsp1ArubBKUzftk5MYQy2EFMWUs4959EwWTY6uPXA==","shasum":"7c23e1d10555dc51f0aa412cb13bd6a8cef52a21","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.d21acc8f.0.tgz","fileCount":13,"unpackedSize":54333,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFpQIeDzkij19ob7VECUaE8XHBElMVu6FaKJGSWVLvlrAiEAm4YVGBRSPDtZnXXD/WUCMoienKvA914j9DkjAued/r4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.d21acc8f.0_1634769132873_0.43144439157434955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-drawer","version":"0.25.3","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"^0.25.3","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.261f2db59.0"},"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-drawer@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-PL00ifjojIIVtAqv5v3l/uuKSufwcPqsVUWEuSvd6ncPGj2GoL45dWt3HPotUVbWarzqVh4wHj+Yr63WNxgPxw==","shasum":"9a1dd1928322933c81f5201c7215f849d85de329","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.25.3.tgz","fileCount":13,"unpackedSize":54298,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZUKjrJqsNVVpAYjNQgNMcIAU2e3YRQ7t4uoh79NedEAIgKeQRlZhtO74Q0yKUIcIrwXX1gbgwXTneFeojXDjQbzE="}]},"_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-drawer_0.25.3_1634838938180_0.19935674216910715"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.60449b7b.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.60449b7b.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.9803d2dc1.0","@material/mwc-base":"0.26.0-canary.60449b7b.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.9803d2dc1.0"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-MQXaWD1HH2COuYm8EZBIph6ypH/c/PvGU9FUGTGu0IXVqJMe2bkh7Xrlsn5nTXbnvRpyRdYxBuwTj0vO8eJSkQ==","shasum":"c9f2d6c23fc00882f4f4aa77c013860c2377197e","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.60449b7b.0.tgz","fileCount":13,"unpackedSize":54333,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICvIThE/PBJTVuXs6FjqzOpO0E22TOCiFgs/1N43q649AiEAwNGSq83UHyLZKJth9klBilEHprjVpAXEDlp+KAfRg8U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.60449b7b.0_1634840225452_0.5157142301887254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0d8084ed.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.0d8084ed.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.9803d2dc1.0","@material/mwc-base":"0.26.0-canary.0d8084ed.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.9803d2dc1.0"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-dU05W5XuPm+wV1vfZiSxteETs+GsxVKk5gqwNuijNZy7xOYDDrH3dRQP6yZun5bikoAAgJFySiOl/SoF+IuIDQ==","shasum":"3c423619e9b19839f498cd8008d85382f64cdb00","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.0d8084ed.0.tgz","fileCount":13,"unpackedSize":54333,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAYCCKst9pJF0j/TIp4CnOj0/RmW/5+d0t3yn6fPyFhqAiEAxWStdNT/TDY4L5xlg/6QBiPZE+3lOfQ7xOgTu5b+p7Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.0d8084ed.0_1635443077939_0.07070006754399616"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.232327ee.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.232327ee.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.232327ee.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-AASN2izb2zRYf6aH13QVjmjx+FEIybly+qfd6U1faBri0R4naXmifrAPMk0yRa24fg+0j5TXKRDqeCMPA9CqIQ==","shasum":"35ecf621041a1188096f1b4fe0ec1aa6bccc2102","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.232327ee.0.tgz","fileCount":13,"unpackedSize":54333,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGVjON56utzjsrmPTzI+iG0aKOFUz7hyjBq6Mi+BzbXBAiEAtNx/OedOuCmr9QoXzlXM90XeCHBUmQnp9Bt+1BOPiUs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.232327ee.0_1635797728658_0.5299948073414054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0a492ae8.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.0a492ae8.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.0a492ae8.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-sA/GMyRCaeRGlATVzjIJhimakFlqVymHp9mJfyzHLU2pzIRbgJ72BZLJa7HpEvdyDqRXokKRdxW+ctPtUYfKpw==","shasum":"9c17959419f76f8977e9bab54533fec5150daff6","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.0a492ae8.0.tgz","fileCount":13,"unpackedSize":54333,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGzGtoZsw8sp/jxkFlvbA3K4jJWYh6JKKetLqDvg7y3BAiAQNTisSYXNcIg5i+5H866h9czo8QHaSi+QPDpGxpMl5g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.0a492ae8.0_1635847208523_0.8986508224193941"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0aa18745.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.0aa18745.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.0aa18745.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-b5GWx07D7LMs/UDuwbkF1wvR22ukBTdSM8UpfYQJ/AKotI4UGieeMv4SfCGvJhgam+3htaQqFfy//pyeTF3hqA==","shasum":"b05e24587123623a5eeffdddffb407925827ee37","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.0aa18745.0.tgz","fileCount":13,"unpackedSize":54333,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDc8QZUPZLUuzdKz5YyIBC4GZb/IGnQyFgVyy0Cxzce5gIhAJ3fc2JadWCV3ELNxvNEYHUS72vIWlgAVJpxE5E3C0zl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.0aa18745.0_1635876453625_0.14344968915365075"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.f3e28323.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.f3e28323.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.f3e28323.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-yXkZL0qXbIM9gSG/nVeHWmKCwvAWiHMGIlagVTtUwk8v7YNAqJd0Vpl0fw4qZ5m3+Cdtlbn8SA954wt07jZfAg==","shasum":"05ab4ee204568165a7817c3116f594caed17364a","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.f3e28323.0.tgz","fileCount":13,"unpackedSize":54333,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHEIyXxL7UjlhIezt1UTGVTddcm1EIY1AgmGV3iddVS2AiEAn2OkzSVFPBTlYE60Wbvn3H0ItlIWWVgFAylftkSZOgg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.f3e28323.0_1635879552392_0.6515775805900117"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.27e05c5d.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.27e05c5d.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.27e05c5d.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-rtGX1qhEgMEM06CTg7iTUBGB4/yRWFdu07DhPed0lgYXbDByygEOQ4MnRTQCEeo6G8U9L9SJZVHHm9ytR7uBHw==","shasum":"3235763e76c4abd03bcee95dc37a84a634cb4e42","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.27e05c5d.0.tgz","fileCount":13,"unpackedSize":54333,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGwSDyJjIX4q4dUqQV+gOrIoXWV3HX1Xx4zbX7AXOjoUAiEA6YGKpkaIBcd5pZXftuMggmQVsqobOsJanJKhTiynX2s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.27e05c5d.0_1635965082155_0.11990410447567323"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9e44af7.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.b9e44af7.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.b9e44af7.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-pVvMb+qLdlof8q4xnEVBptzmE7XK5HxGALye9deQ94BzUTBy+t1X7f7diuPXFn1SOphhH6ojrezBij+vyjx4YA==","shasum":"9ae12b8505e6456bc2cbb6754d3fdd91c0188544","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.b9e44af7.0.tgz","fileCount":13,"unpackedSize":54333,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcRwCsybWrG8XpHvnZ9hzv4YUAxtm0fLEb3GGmXWhXHgIgRd0qulag6Pxloip2XIDFRm8J0Fz6x2gdvUEL3q5IOy0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.b9e44af7.0_1635966225759_0.8131921214825633"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.448f6cb9.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.448f6cb9.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.448f6cb9.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-O9H9f/MPEc3yDPBJCf02XP6ygst+XZGRQbj/5FEwyK9ibG47HUCApDPnKfSWHtAjo8NGBSOjMHUh8Ag4jPWfLQ==","shasum":"89bbeb62149e063c2ee2ee9212cf8cbf97a340f1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.448f6cb9.0.tgz","fileCount":13,"unpackedSize":54333,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYoFh3Vu0j3PUG/yL7p7rRNGWsxgW7eGczIEByAI6Q2wIgckO2zBVVF9Vj27BMoY/UXV1edcWgJlf2+5mZuZwtznc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.448f6cb9.0_1636049258634_0.80388959386129"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.8067ce28.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.8067ce28.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.8067ce28.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-52oghfMMsSeL8VU9t0qVNQkPZPZGB0nzMMQrHcwhPHL64j0CLA7mgZxCz6wJaRPYcN7JAtKEwJFTHUeEOzf73Q==","shasum":"39ad0ffb28caa8bb11b1901930755746d170bfd1","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.8067ce28.0.tgz","fileCount":13,"unpackedSize":54333,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCB1NaU1euUcqBGhsewLHUi7rs6l2+r0vGx7443Snms3QIgP8Et5YHId5Rew7duJkyO9SNW7wjFwmgkHWW24EsNKIQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-drawer_0.26.0-canary.8067ce28.0_1636064530413_0.7507981877965615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.345c2bb9.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.345c2bb9.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.43d08ba77.0","@material/mwc-base":"0.26.0-canary.345c2bb9.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.43d08ba77.0"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-C3Rko8V8aEq/PiWBIKznzNDdEbMSVIMeRIk0Sdr6K6DWeMindhGjJBeBp2xFUjEAL+l59xqJ3zNj0yWYOt8gTQ==","shasum":"3938dda32af854c68a3d056778469cbfb4391efc","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.345c2bb9.0.tgz","fileCount":13,"unpackedSize":54333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP3UCRA9TVsSAnZWagAAaOIP/iFrwr7C5qclLpJgJaI+\nM72mja6aWz/QZp+zZ+3l2K0q4QcKiqXcxgif6cA9lLxFzgMEQneNj85U2lh+\nCxaSFZFMWxstrHqi8kIw3d382YNnuCDkOOIQopPD2FvjJSwprsDJmts/0tCP\nqnd5u0DpvaskbJgtmny0X1nAfV8UecZ77OIN4I/e/sOFKmIN/Ls0f3BtY5RG\n0xcehaGM0xIDWmoaPRpdKEyhdCFbFY3/fm4fB3X0Az1S+8PQOVKSfLthaPcI\nIqKh19JkibaQD4CXUGOKSCSO0zOXSCbr86KFfY4AzpzgBH/00OaWClb4mwag\nC4MMefnlCFmP7gtk+2ivHt4fA9G0XppugXDzvd163RZSEiUOq4wHUg76DILJ\nBR8jfUakz9aYAzYxZfvPq1g4h7F/6ysdjk/B20tjwxzkSQEghhQTI5N8NMoF\nXekaH5ZN7v7GaPGyY8HjrFT2L28O5Q+4eHHthjVg0pJ/Lut/HRnnZjkGoU8d\nKWGEHX5gE1NrPXId5KQ8qgah4IUaZLxWK9nO0v7ek+vhmwt4sOS89DrdQ6e9\nYsboBoUZ/xIKhi6IMPm5i78GaJvWoFn+iumFRiuqZl4Jnqmn2tQcvr+GmMyx\nzDzsQESmgJ9VdtpuaryO5p0xdSJfOVpIyCe+5YP1Wf2eC4XkbovXZ08y6BgP\nnFsk\r\n=orPu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmMJ+wsUXRfvb/OGnBNQHdbs89dqDlHj16m1eL1GtymwIhAJjGdswjP2hlp3OyWrvkQgXIHnkO247+vCBkNdyAFutg"}]},"_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-drawer_0.26.0-canary.345c2bb9.0_1638464980740_0.9768396401512041"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0547aeeb.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.0547aeeb.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.17a072535.0","@material/mwc-base":"0.26.0-canary.0547aeeb.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.17a072535.0"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-dkC98DPOSD/ExA+YIUvvNvaiMMIKeAINtnTS7Lbws4BOTT2PBpR2s+IrCUnsz+HOF+rGHp6Q5Yu7X6HJbXa0Rg==","shasum":"2fb33b699eea5e7c923468c4c84b4d2fc5b145f5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.0547aeeb.0.tgz","fileCount":13,"unpackedSize":54333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjvVCRA9TVsSAnZWagAAgZ0P/2lN20bRtbF3Jr67aun0\nd5V4BeA6ku8GbuoXFXpGeTu3WPp0DiJmD/gKE3KM+1YM7m9GGO+vpv72T2HS\nGlP8dZPPhh4Q/NcI08JlKgDi2awEOXGcAcDxEIzCXKfSl1vQiU+gfUSpSC+6\nxORb13eRzPOR8sVCbkdE912+VW+mTS3XOsvemR7qS4RHr4PcaQFwekxMnyyX\nXhIbE89wa1jhCz7eBsEsgXxTyUNiBkucaMjBx37KV00Ut5gC+gBJtgz7ILAo\nUMrUh8vwIYyruV30T5GkmNA79e1TsXZoojj+i+IWCZLgKzEEtl7SfM59NKH8\nd6pCkFqrYtMG39T0PZw18hxtxfQnhjym7TvO/6/p7PHzUAOUg63kCzzQRO3m\nqV1v2N8CEfVxTQnoMxK7Jv10AU5L8O04PZD0ibgGJwbCmmwvxjvIN2r568iS\n8vv9kYsxAzrcer0ADM7mb4MdqL8a/ZhVzSL+V0b9hGX+cpnfvcgvR7r00Q6Q\n0yVYIKxMwqCCQLp7hhOM8wMuVjtTR6/jOhFiQIF4xVMLi4vQ80ELfqZtPhj+\nUWE0KcjR3DMlUkMeosurFap4N1ezjD1rRzvE5rkfzuZPDmg4x/JWjxl/LG5S\nsUHhUH6EsOPq7vtW9MYS1GRjgBJW2janCUcCETMyAdHVpT5Ou6knOVH9mZbG\nAsJt\r\n=wKcx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDWKt3qm9TWCBiy/wJR4vkEgBuO0kdJJbW5ENL1BkfL5AiB+CtFaf2WZMwncXPGOPtRXhT7E3IAEstEw2cgVcgVQHg=="}]},"_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-drawer_0.26.0-canary.0547aeeb.0_1638808533092_0.691123085076216"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3b2452cc.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.3b2452cc.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.b6510c8c1.0","@material/mwc-base":"0.26.0-canary.3b2452cc.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.b6510c8c1.0"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Afy5eH4QWQFx95tManylkmZk0xrS5ResgSrK9No0tieu8qm0R7794G0M8htFMjURzPr3Ji+g2evuqlSGD4+QaQ==","shasum":"c483bdfca46c090f732c49bb2141a1f02e17f63b","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.3b2452cc.0.tgz","fileCount":13,"unpackedSize":54333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUg5CRA9TVsSAnZWagAA1jkP/0NYkI1Kf1zrKcNAX5LY\nP1+DWL7TsvbAWLE8vxR2kKce8CWLrUAoRuWdMS8DL1pNNuH2WrUEhQxpUzK0\nw/WFTgi7On+/7Sm9wLupNdqI/zoay5PEUnE3SPx7puVzPG4TypQeeITf5uvz\nLh06w7/a34OsbVqvxSEy23pZklK6983+RKixYW9dOwRd2Y16elmW4kyE01Q/\nJeifMjmav9KPRlTCl7jimvC88rpr4hkes2jY4qWVpOMx8RUfZ1WqsZwQuO8K\nD1uGhsAKyaEj/k8VKxtLREFnpOQJpGKW+/vWYK1tPv1WOB9646KzjxixAmzo\nEvy04xSgpS6mvDcnlRjn/1ynroSwii57Fa7SFxg6fxleTy9soVUuTh+RxgNJ\nS/spX7hOMm2BZFqoPdgEVGSb0HIag2tt62NrWr3Zx0UxRM1V+ulADU4tmBvh\nkJUMYGa89vGmjdxiB1vTJJpbPiwwYQ6E05Yjdmh3h/1zgWlWoQjCAIhTEp9N\nVKMwSAEVPXw7EvlrVxqiw/WRLNHwmoUWGH53lRGTDlhvQc7V2mA+kf5YOIYP\nfYUG61roP0L+XPy/inbSs1XJmAznHskjJoIuvG9X8W9XHkh2cY7wYYg3X3PL\nhSrGzBdGEAtvyF24UiYlMejgC+4VMXBP3BA008CXNPpO2ojBWjdQuJN/qQeA\nbJJZ\r\n=/+bc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICwdFqzjvB3didcmupRFctRgePvUxL5cgB8kd5Q8t041AiAr7J6DwxZB27FOd+y9IKeV10kLRRsbRAkGd4Sbi/cSNg=="}]},"_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-drawer_0.26.0-canary.3b2452cc.0_1639008313557_0.714159947419273"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.cf7ba5a9.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.cf7ba5a9.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.f460e23da.0","@material/mwc-base":"0.26.0-canary.cf7ba5a9.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.f460e23da.0"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-cEScl7N7BBUH3k9n8VMkrKnO8JgCSVmg0VZytQ1kDZ3AN07nCf+dplLxUJKBKhdeumP4zF40AS3r8nHPBPi8FA==","shasum":"2d3008947ae14b0be25703a165e2ffe0ba9d9440","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":13,"unpackedSize":54333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6UyCRA9TVsSAnZWagAAb5MP/i6zrB+koYYRkT18PZN4\nyZV69nFI9ArCnGrns8eZWGHFWdEoVmUv+Q7/+JwILh1ixFL9qCL/GDcsK1jK\nEWSFWRDPqsM2FmG1StP6jxcNKQWJJKmKX7JwXqWM4XpknYjZTme89p32EI9d\nXqMHIDIC66n4ohBZ5wthfzxovC7RQUMUW6T6R3LQ6TbuRvYNAtKSCBzzYaqn\n1SXpigt7PiTXApqO/vnQ5SU4xSOLKHC7pZ9Xxax4rusvZApd0NrnWoBZTYbB\nsFnhiIOxCX4h7wMMZX5Ykhgq4mXFYr+gahMYtRix4Nc9zn0N+tEFxSf6HPTb\nlsm5moO5SrAfNpy+Z/j/CQuTR7w6t7kWsS1LTHooqdviDudcwUCk5T9OgwMH\nF377dI9wa1xn+dpLYfJsOHiCnBsbPuajbcds4zO4XsA+b+Bon5oQCw0d4uu8\n9G1ohW8ug7uh3GpFIm/fn8+7Tgd84fH1zdfrSUfg2ysgis2V6Hz/PofJtumo\nBIJIidZqvVADOwDKIQkjBHkXoBKEyhBz51jjPHuJWtiuSWApGllVgIEZ51IF\nTFHEzJx2PnpQ4+7/Z9km6melTOYjq0sdWZ4ScqOTvYakuLoWu/h8IG1ZxZy7\nCq0lEi/NnoqFoWW6iPa2tNRPWVbeeLtnJXBa6Ztou5WlxsoVYqXgjcSsFjJI\nrWx/\r\n=hNZM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9yxCeJGmt+QhR1kxw/3cb/rwsx12wIuyprUS7XDDEYQIhAI+IpSNPer+bi2ytoJyLSA3Z8qrLxo8J328eA+cbj9kO"}]},"_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-drawer_0.26.0-canary.cf7ba5a9.0_1639163186644_0.5375768819522242"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e1bcf14e.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.e1bcf14e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.3366a71d7.0","@material/mwc-base":"0.26.0-canary.e1bcf14e.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.3366a71d7.0"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-dxonKvCvuokD4rYIP4GM/BThR/kYeiugcfyc45Q7iNM0Rv74yPPaip6pA1Mc4o/XED74/iR9b+yTyyKavDqTHg==","shasum":"6e8a7a59c73eeab85fc0c8fd0d4d43c90be00060","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.e1bcf14e.0.tgz","fileCount":13,"unpackedSize":54333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3dXCRA9TVsSAnZWagAAvwEP/3VQ9lp0cAhIQHpAWuK/\nkutMEF/g2EQGbZpJVWunmrZTiXfifI2c60vlXdGkZC2pcM7DorVVCfajIpOA\nH9ptSsYewcipP2f8nFdac2WnDFtMBnNc/UN3anNsw16lXWUulLiEK/11tJRn\ncWrbZXxSy0tIhcWGkXj+RVCorsDWa6VqUPTLTi130nx3sW0v9fTBbHXiE7jh\nJ9G32LhZqohkBuYataehVye6riBqCK+noNHbaEG9H+D4jOtNTBICbW6B6VVV\nxUHqGruTOgGvhM7KT20yA1Uko7JX+PffBXetWcTfwmZp9yV/Bes3K5WIOYLe\nVZf3REVCKt1uocKTrK9Wx3m0fCE5mrevT2X94VCqW5AWzdBcdOjQbfUdWl5q\nXAJV4n/ohzJ8GBbaupn2R1Mo8Fir9LYlIIBGAENbqzOmLA5QQqHw+lfppzxV\nBeLhrI6AlY4Udo/cbunPD845agh8VtAoSKG+ScVhzdaC5RTXvMTi0AF2c0Wg\nZiiGtasxprdcxQq8f/nLoMQOu/a71a9Glsjd7J2MuBSSjjd4ElWpfv+p5yfc\ngGV5Jko7fjj8KsqixQ3C1lY5k/8z2YaLxRk0Dzc3+losKDxeedgWkzOK0MTN\nXdJ8fZToXhfwI/4UmB5rldIotIypdd1R0rJFr+GrPLNaZ8oCfL8mOViQjuyB\nqZmm\r\n=qZmN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEuwo82htIDa/fSyfSqysGA6y7iKu4ZrU8HN/N06V+yPAiBdNmLZQr0T1a0W//5RCF6clz0EQKpJ3pR5yMl7/2RBgw=="}]},"_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-drawer_0.26.0-canary.e1bcf14e.0_1640724311014_0.6791668135153786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9d35b69.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.b9d35b69.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.c047f7c19.0","@material/mwc-base":"0.26.0-canary.b9d35b69.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.c047f7c19.0"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-ec3nukcJ6bfXOBHJNrbjEo9X+SB2Bd/fxOmAw8MwC4inzzEE2X+Mmpg+VXkZnSmByhpljSbhsxn2/uPcFLoJCw==","shasum":"7d3c53cbfed60b74457776d888e1099e3899e3c5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.b9d35b69.0.tgz","fileCount":13,"unpackedSize":54333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eLSCRA9TVsSAnZWagAAK58QAKLGf0EmpY7MfsBFfGYZ\nMdvxKclBOXfWbyItdNNAUspC//Bnmhb8dFw8rsn2bps2RabK+0wNRowGGJmA\ne4N7dmjNKaDqhBZE1txsNM2gaWRngH00myd6cBoF1kPUEqSVzci4E7Vw+Rtg\nEY1PJR1ewlcZ6Ma74CWAWwbbXeU88iacL4RQcWMP/d3BYsN6X03pNxsbB5Yw\nKtr/MQu3dz4nlIHhYMBZamucl2qynSmt6Iq0+ltvrvHx0Qaw2YrDxMuCM7vf\n5Kd8ZLWJT6PCRBy2lG4NYu5dmKB7IWTn9dB1JNpMlP5/AN+SfRUYNz2Y3vNZ\n4s0jY1tEMPDpsFvv/3LVTRaJdy0x51XyHG7ctpxJoKhRW2qWkoz4dxDFWV0l\nX9loYEiKwdoN/ivaMPGHeot5ObaRhTlMEnnLtwGxR8jjK/VyHC5FlxTYi5o/\nCEi4ukKogfECz9UFIPyhxjkseqWsgYv0hVh6uKJ9XjTJNNFpQV8KXX0w2x50\nzgmAe9E7/ceAUjZAyqU6F0ZD/cJt9mUFmHo91oWsXEpTcQIHsb0SE3uZtsHw\nOoAY/2RpYsy1bSpk9atGMk5FgfqeSnT4ape1fxzkpPMNCx3tb5yD0BofXPru\nV/lF/5nx0MyW8UU1IvX7d7g+iBusssJCYEtT6cBSu+QM8Xe17Q5s2xPV+6Te\n/CJ1\r\n=rIZs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCL0SkdUfsL64TQq/f4eds0SUs1IR7GRAyzT+NoPxd3eQIhALQ8MkJe+Kv0Y3mM3HJBxYXlR1mByPditPbv0+FZ+EDw"}]},"_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-drawer_0.26.0-canary.b9d35b69.0_1641407186310_0.15520484352800956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.2afff08e.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.2afff08e.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.05db65ec0.0","@material/mwc-base":"0.26.0-canary.2afff08e.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.05db65ec0.0"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-Cl4fn7bvcUKwCT6L3KPpeK/CK7v0ujWSpoMTs+Pin91Pc/SZjZ38GcCxHbwRX/j2tnBqdSA0Q1BYP0+xEMGFaA==","shasum":"a0789081e4e413dc80021c573d9d7f72f3f908a5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.2afff08e.0.tgz","fileCount":13,"unpackedSize":54333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12ugCRA9TVsSAnZWagAAluwQAKFBtJsSjxcWiaT9ZBS2\n3kkkF2wRhRBZwSGVuxPTU0fL/Rqn1GulTx6hqOpKj38Ges8B3j5vgKfdntiG\nTuCjHgzJ2B+xDxZI05xcLqiHKjTjLyIsIAXJk5NZwCpJ0ohFKBLL1lBejXIe\n1XXR0zlCs3i9FZVU58xjffUzBReOYBbnjkgwf7LyLuzy2O9St5we+3cJ5B2h\nksFnaeyRomB5ZAINJq3uXvIuMXWk4IpgjCwgvt60C6l0MYEDtlhKYeB95e9l\nS83wXSL3XM02Rb6wVPHSVk2HHl7g57sxfwAqGNhtbcRycMrpNd8ntbp2okDR\nS08cYw9wEEw7inpRKUVZyD50oQUbGWuJDo757aa9why4zI+gburl1/kwfVZl\n7/Rfoyt4um+k/wYLMkDpzAzjy/j7JKJ1dlsEu8bHO87gvLFePfQZOgkQJum+\naRwOM/UpBekmrAteMW6HMXBW2OdQf8RYireXTuertrTdTtPzjYXpjuIjWVVM\nA+9/1rU2kOZbTdOZELNxFSoB7A6ECXGQbK5ERwsr8g8zQQTeFhyoIIVfudXK\nQtMhOUcaEMwgp3H8dbdC+Neyj07K5pj2QdPBkySOH4sPq2pABLqi3tZUzNgq\nCLoR2rZeW3QgWJRFcSX/KJus/ENY1NNKvQa6GD2tab8B9/1HIQazW6QcWmi7\nSAwq\r\n=GNwF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCRdqMwct8wQR7efGrRz7ECy1Tk8O2ItmVYzilQ5J1vQIgXEjibpGBWeYFhFvWlQXA79/rAKRUPB4DpfpZZGn+b2Q="}]},"_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-drawer_0.26.0-canary.2afff08e.0_1641507743893_0.7974459610688747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.893fc857.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.893fc857.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.6ca8b8f85.0","@material/mwc-base":"0.26.0-canary.893fc857.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.6ca8b8f85.0"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-6HKujufrVxq5MrnZQEU+BrOLNUqtYTotSTQtc5O698lI5tMXOiOstX6aaJGNUN4pnfJkNUEBsNBMYw7bnxRBSA==","shasum":"379c560abaa1116c18751933fc8b9118fce4c30c","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.893fc857.0.tgz","fileCount":13,"unpackedSize":54333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2IwcCRA9TVsSAnZWagAAabkP/j1dVbae/0Fv+xzN/+6j\n+ojxGnHLBXV4aIdnvcujZo9ZTrj3EJa1T4tfHIcGppx4L3LaZ8CP0JR0u5NF\nT/67lfiZkgexe7nnEWq8jDG2bm2FnkPnuU2PwCT2QK8ZEvDB8BpOKz31+LyA\nAiA0H3yIjirCvtk80c4VAfA3q5voKgIJOpGFiURgFDLIzWV6XbKoTonyTSdZ\n7oLY3mzClh5rSEuP25lVvroiusr0TwCoEdFGNaz48GHwHZfzD3660eiNP4tk\nWUZj8hH2H9bPdSgvusrcb5Ap+zjQ/DfJxEInhlJ0BsYWbYxLoOy2O2gsjObU\n2delAyb6rX1hXlMl8nPi2jxNw8J7scpX0XFnRL7+fzHXFPVkFG8makmGKEAY\nbp9LlqVBiaNeokfA52aaemY1ad748rvgHwwxDMjsxGuW/Ni1noZOPRYeOagk\ni0XJtXFiLSRjedtjin5ibpZjH6GJ3xrUCpsRmW4W27xKJpiWYY9KDlVHGXWO\ntL8FVGSgYnDJMup1CeZPES5mSNBOvdSdqzhAggI4B1hp86fwe+BLaw72vRNJ\nSW4/3Hc5GlDnS31G+J+7K6fIH67njlpiGx9cChTwgJlCSnSGE0XVtREKXBDq\n0eaXMs0F1gUhlaok6bYaVmDYWIyx60XeOG8EXBm7j8yDtZAy+X19yqDK/QxU\n+ooS\r\n=Ihwe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfa+KoqCJ1fqCPsc6RYxCOygY7fq50gB8NX/pJa40a9QIhANCESY0bd+F5my3mT1ojv0O6SMkWFCglnxBCbN/EWisl"}]},"_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-drawer_0.26.0-canary.893fc857.0_1641581595831_0.2590986228644505"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.69ba13b7.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.69ba13b7.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.c14e977ee.0","@material/mwc-base":"0.26.0-canary.69ba13b7.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.c14e977ee.0"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-9U2BP8mNSAdVxEk3exrUs7J0HRS/o1ms0jBZymWJBV5rv9dOkE/Ob68WQFBwkFsX/9zs/agOtCPjzvsATp2hZw==","shasum":"b95ce9d4448490db8f67b2cca23c9315af09dad5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.69ba13b7.0.tgz","fileCount":13,"unpackedSize":54333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I9WCRA9TVsSAnZWagAAIHQP/Aid9OYqnQw86t5BzJUt\nG6F5SyC1as4QannEErNax3lhuvDyvo3I+oJbVGJx618z33Aomfrs6/Bt8B3/\nYG7XU3w1TnbPzq50JQx84VRqUa1LwvuBdND/t5OmUEgGH0SAOaDTWWO2v+sa\nypydVMY2Dm3+8XXboi91ytv8GG3SmJKUn0bfeekdu7Q7di71fkooEZwhh8q+\n1EA977Cuc7Siwm5Ai++RIGetHLapTKNwB3pG/setaz0aflVEQsr8C1+PzifU\nGWQwDUXWfr5M7rxnAohmdh/M3Ii4DYqa9/zMUVsdTfohzLQ1z3DSm/o8J70T\naPOsYaYoOi11aRU1NHFu0pSfhPsnDB/O4phki7aI0Z+ADgYFxGEubBXdkDbT\nYmk6Waf6lVzEG3PvmySdHH57QpI4QPonL7OZUlEH78x9OME+/qg3ADU46Ixq\nAoyQz3HUiz2wf7vzrXwJuf40jlV6CNzVSGbzauM6vKqubdVtH0O8nN4jH55m\nOIj9iJT9oc8PpzeID5X0Pcskm2n4x8fzaUPsk/QkTwXCCMvYSoU1/L73G+wz\n/nPpHHAuI2099NzzKNKdbk6E0z8005SNNgmQcQz+t2Y2748iaXZD418L7oRE\nIkzw8NfSviQmaj1CDdUtMUxPwYie+2TB0A8+mfIyZ3Pc0uJat9GBQk6zybg0\nwpJh\r\n=7f+u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFqyeheyGHg8x9T7ImjnvJpZrmYxHmLGIeB0upeSpqNNAiBkPmPm3H/JDqocuiKOr9Vw+qsYYKMMtZMjC3Y7mM3eLQ=="}]},"_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-drawer_0.26.0-canary.69ba13b7.0_1642630998537_0.5304282739530639"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0af8ade5.0":{"name":"@material/mwc-drawer","version":"0.26.0-canary.0af8ade5.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.c14e977ee.0","@material/mwc-base":"0.26.0-canary.0af8ade5.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.c14e977ee.0"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-drawer@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-2KtjVSADjHGplHYmHK62tAa3JI8RnecYIYOOrCVQ1nm7SF6HA94oYj8oFUZQsd7AeOl/jLoD2pm+MkXRu2CfRw==","shasum":"f3e9a5880df9c6ca2fe250a6c1f066fc2fd7ece5","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0-canary.0af8ade5.0.tgz","fileCount":13,"unpackedSize":54333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZd0CRA9TVsSAnZWagAArN4P/1f7lUfmRR63aDMUry3l\nMG24o5QPcco2a4VkszW/Gxlr9LpxoWyaPlOadcVzSI6F2XnpRau3GqElElzb\niJ217uWtrSPEom5GeMOc8jDzpl6XYqVEm8GjQwecw9Rd+bDfjkJlLyhhf3Ae\njb3tpuFSZyXFi9dDAj/DVAcpXYxhkZTbsWUB/0nmNYhAKDOhSpFY6WapbHGU\nsblHiMHH0Ktq0jfHez+uAHM9zSdlgdg4qt5wdaWdKfEAtNLsKt0NupNbO1Ue\nYryTI3fkIbudE+bvWHpRtNJlEuKkOv2GGPwYYI5yLlIhXKM5vFKEtz1Y+jl2\nmXV4wM6Wp/3BAS0QfT30aGh+TBIaNt2bQ6gLIvED8Hvj1ndF7zSlaEERVoYK\nxU4bWfRYwey2c4YkwcSh1Sm0KAJop+TyQF3EPO/6ChTc6ltoNDAz7ey9ZRIv\nnOEaa3ELoc7GC7o2KPpC9B0WdGw5/VwVG2yYM6bUs4lG3yLC8OVEWH//KLlf\nIBhdvg2FIXzOUQ7ZBJE5ZoJR6QRuKYcs0HZZnu5yEKwsJ3ugiKLkDSEihQ/B\nMtEUOOhdblJOnDfnOynnQV1L7DmQqkNc1ZYeALIWEEwrjeSvdh4NG8N8o8qD\nqhbtRCrAUQ8lJe5nNdqotmIVSkiCrk7BQtZvElM0KY28uSnU6xb7uTwFQ2XZ\nyW88\r\n=W+i4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGh5/YAE4jtBXKfCZIaPPM5lCUrSn9Su9joc5N72hQN1AiBd+/fg9DIt7Uc9JvEeyBjEgzLPGTOhNVLV7bHANlwzcQ=="}]},"_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-drawer_0.26.0-canary.0af8ade5.0_1644271476027_0.34526024091222385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-drawer","version":"0.26.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0","@material/mwc-base":"^0.26.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0"},"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-drawer@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-7hvs8qXKYYMQpATZQvcgX9xxnxLKNWh09SoA+an9jBQVjcLQ+YFWumkgq3/ouLipEBT4b7M7H/Gf7WkAmE1K3Q==","shasum":"12026c669aac54a7356d8a95bd238554f4ef33cf","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.0.tgz","fileCount":13,"unpackedSize":54242,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHhxCv6CeMjDitcaFTWik4rAFW9U/I/N2deCZAZkHo21AiEAvKlkQXaRQ9YpvZ9yQBDc1hxlydxh0vdqHuoaVSdUlFM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWa0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwSA/+JWkLUxkztCRg5cKHmDWBgJFcpuKfq6z3RgrgFLPzbEvzLHjE\r\n82vv7jUTgxcl5e/Up1leGfWuOKIz4rR47ZF3q5YX9CAMGyUhgnN56X2kYN9S\r\nzS+E9qdkYKCyh60p/ur5dD8NRqhqEkUdHMLgViWBtk+Eq+Ua4msNeTdylKq/\r\nk1tIvri/xjYJLytFiydgK1P1agZCiD+JS2rGShupbFYziDK6Gd2F5P2OHn76\r\n7+plhn5N2iFptF5D8YElKPMzAVNeaXSd3wOqpBi6HgyklS0lK3IhHfm05ARz\r\n2u24QFqIvLF6+xfmBNzg2PcawN8+SVwGtgea5CbyZ7Y/QwHkqfvg7VWMhJF+\r\n77Adx4at8+k4EB4TXxRsv+Jw/sfdgGc3zo+fmyd219E52fcBSZgm0Z8uVEf/\r\nHhUpkmAyN6PTFemeaD+i1JrB1yhTPZd+ac+MjEscYr/0BXbih5G2nsQY0jI8\r\nkPsvk9LqI+E72Ftn8i3P62VDOTUe1XrxgORoZZjBcMpdL/en2MN/WLIAvJFC\r\nH5oYjpYX2rI8jSRWKmDMw/3+YLia22BZqhj6Q3zrqKsXr8DwxmWJqd8+lQB/\r\nwoiLbg9ORtQz01jBKKQB6MZsxREm89PkGZit4E/y7IbgKyfvxiHHpaFwPYms\r\n4Gz5ojXgEfF2U6uv/qw6smhEHEQeWw3JDNU=\r\n=tD9P\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-drawer_0.26.0_1651599028788_0.7476347868480262"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-drawer","version":"0.26.1","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.53b3cad2f.0","@material/mwc-base":"^0.26.1","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.53b3cad2f.0"},"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-drawer@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-KzyfokeKN9WGEepcou9kkMLnGc6H78GARpmLbqm0o5oQbDbJLlD/x7ENSgCU+HpRpmCo8eEkU87YHBhJI0yQbA==","shasum":"a87a12c64c11d82a10a4bdef9f3bd832ca9c81ad","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.26.1.tgz","fileCount":13,"unpackedSize":54355,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHUhgKkIWuTzQJQ4ezxKbcS45niD49NV0f1h6rrKvMmgAiBZi2nG65wT5pY+Ucn25u8ERM6rx+wP0QSUy4LlHA/e1g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXoyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMKA/9EnykbpdXrsfL9HPI5VEa0zi4v+mkPGISjmGvnH8IfefOxQNf\r\nxIddBVZ+cU1t0lP7XohsSRlCw3wyzrd4ayzKjZw2XJuKYZA3x2hwU/Tk3Wjn\r\nRmgE16ccknxYvaCQmhg7oF8r8BOoAoPE2MaD8K2dnFrYdSW73G2lDCqHTqYb\r\ndPZA7Hs8ANZen+tr0ZfdTKPfIu8NFPw2F758uakyMLfk16IzEw7hpHPnq7DG\r\n5UQYNYayzXEXf4stRlFy/EOc3qhSwzUUEayqXX0X9qWcGXXB8zn5NCQRUSms\r\nXAxzeTDevop0So2cOWp/WziT78pNHxcPU4cXkY8ZJQXKEUnhbmRMC6VqTzrG\r\nOoOpGkukjj8VK8A2pBe8EbepOgiZ6vZUmD3fnoz7+4haFtiDfegnqEstefQe\r\nHBRxkWTPHXz+1dJ4ZbrwqvM6ndGXtb21sRQhXzJsKN5DR+eBkz2Znhhb4+/U\r\n7mTJBBy4ucEmfc8NfgMEfXXrGjPUpXOVa1jT1rHEe3RnH5ZThLFOobPEhhT6\r\nZ+5+KqCewt/zYVCcIpT4zhqclc6QBZJHiMXWjgPllw/LuAQyLdWPjmOTF3Ah\r\nqOTcQkIa75TWJITFR4i29wBXjxDYplyDu4bT2ZT8xk2ErfFOINF+kntrDglL\r\n8R0vnPnPHkgsuWYIAmr54xWUNQhI/4RYOtA=\r\n=V6hV\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-drawer_0.26.1_1652128305600_0.3538874648560695"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-drawer","version":"0.27.0","description":"Material Design drawer web component","keywords":["material design","web components","drawer"],"main":"mwc-drawer.js","module":"mwc-drawer.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"license":"Apache-2.0","dependencies":{"@material/drawer":"=14.0.0-canary.53b3cad2f.0","@material/mwc-base":"^0.27.0","blocking-elements":"^0.1.0","lit":"^2.0.0","tslib":"^2.0.1","wicg-inert":"^3.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-drawer.scss"},"devDependencies":{"@material/theme":"=14.0.0-canary.53b3cad2f.0"},"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-drawer@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-dy/uwt+aI5aiUDqFcT6Z4GhGmLZR7fu3HMkfqtQDwoJShxnf5hHwk18fiD1VHHCDf9CZ5wjl7ug4fjpcs9r18A==","shasum":"ab9aa9dbb5ddf20628a7bdee7a4bf73d3657617d","tarball":"https://registry.npmjs.org/@material/mwc-drawer/-/mwc-drawer-0.27.0.tgz","fileCount":13,"unpackedSize":54355,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICWv3sw6V9dl0AXy3QfZ19OUOFp+6ukExCAqjwfCh+9tAiEAvE3RsR/n7gzupRJBounROaXidxDJ7A7Mp71Pq1gU5h0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qYAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmAA/8DwRLS0jPVET6VKCJ1ydlExAC5EfaCvpb03ALx9tFp1hR1L5D\r\n7dIGQYZq/wFun3eCfkUmCTXGAmiV1vy6ltuaN4cal5Tx/91Pv9NDoJ+s8gDn\r\nihrSU62cwPix4LhVvTDQnVXeRIENSoZFhIXxmVRaL0zs0O29XUImV6e3PFBI\r\npwSC+E+PctvIxI3OISzPfmY4TKTbrS9PKcCT1m7PrkkWDr8LHGvbmEgz/0wC\r\nQMEBQsj9Ng2BKDzTOd5kFvAPefZhYVWC1BKmhd6r0SHKcaBzy/UbrzoFpD7x\r\nqrBqYEqhU68dUsX5yN1sP9OKhKD0kA/BI0ZCzCyIEGBPZWIXE49Gj/tohRSU\r\nx2ZyJLxj/YbO2eTcGDpdgnKH4vNGYH7WzR/yRpBs2oeUQEM17iyjebTgdMxv\r\nnFXUdgb24SwjzRniBSXv5VGTrFodzc5d/sDKGgxdFYJM7em1bFFQSFvWHv9R\r\nanijTBEUvwdNuUBbhxs1AAU941CyZ2fJyAPBagXdDCky62QtKOyNiGS5Satv\r\nBcwH+HF/45BoluC41GpLg7v7ehq9cAQCMRcb1klC9SajELKAUFKu5o/qiv/I\r\nh9M/cUKOkBlnqHanvFu/l5Zt006EvfVvC2nP4O+1YWqWUUmwZfWuANIdarOF\r\nt1RGLlwAFHyS1vVUSYpHdI2eingbzu0Yfv4=\r\n=zPi5\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-drawer_0.27.0_1660331520379_0.8864874125751112"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2019-06-05T22:20:07.854Z","0.6.0":"2019-06-05T22:20:08.103Z","modified":"2024-04-04T18:48:19.471Z","0.7.0":"2019-08-27T21:23:37.979Z","0.7.1":"2019-08-28T02:54:16.718Z","0.8.0":"2019-09-04T00:04:19.573Z","0.9.0":"2019-09-27T01:36:08.242Z","0.9.1":"2019-09-30T21:04:51.714Z","0.10.0":"2019-10-11T23:28:11.422Z","0.11.0":"2019-11-26T21:49:26.322Z","0.11.1":"2019-11-27T00:26:29.884Z","0.12.0":"2019-12-17T23:47:47.202Z","0.13.0":"2020-02-04T04:46:28.504Z","0.14.0-canary.f790f713.0":"2020-02-28T02:27:57.533Z","0.14.0-canary.c759cfbc.0":"2020-02-29T00:04:30.678Z","0.14.0-canary.97ef53d8.0":"2020-02-29T00:18:03.476Z","0.14.0-canary.24f5fa6e.0":"2020-02-29T01:08:28.442Z","0.14.0-canary.960e214f.0":"2020-02-29T03:08:47.279Z","0.14.0-canary.a2f046f5.0":"2020-03-03T00:56:18.129Z","0.14.0-canary.024f371a.0":"2020-03-03T01:28:34.596Z","0.14.0-canary.2f164110.0":"2020-03-03T21:33:29.776Z","0.14.0-canary.edd465cd.0":"2020-03-04T00:10:27.179Z","0.14.0-canary.2b02d017.0":"2020-03-04T20:18:51.944Z","0.14.0-canary.cbdfe453.0":"2020-03-04T21:44:15.847Z","0.14.0-canary.02aa8a98.0":"2020-03-06T22:53:05.719Z","0.14.0-canary.7cd5aad6.0":"2020-03-09T23:19:52.996Z","0.14.0-canary.3a79dfa6.0":"2020-03-10T02:55:51.998Z","0.14.0-canary.22e0f5c9.0":"2020-03-10T02:59:54.943Z","0.14.0-canary.f23a1d1b.0":"2020-03-10T20:56:14.298Z","0.14.0-canary.34b2d69a.0":"2020-03-10T21:14:26.837Z","0.14.0-canary.dc04abe1.0":"2020-03-10T22:01:58.906Z","0.14.0-canary.04ccbc88.0":"2020-03-11T00:34:38.038Z","0.14.0-canary.55338c25.0":"2020-03-11T06:31:10.323Z","0.14.0-canary.b7e388f3.0":"2020-03-11T20:19:26.324Z","0.14.0-canary.b3211481.0":"2020-03-11T20:23:38.207Z","0.14.0-canary.0b5c7f23.0":"2020-03-11T21:53:26.783Z","0.14.0-canary.6c0f0b27.0":"2020-03-12T21:16:43.164Z","0.14.0-canary.b6c53425.0":"2020-03-13T16:55:03.156Z","0.14.0-canary.306cabed.0":"2020-03-17T21:17:25.083Z","0.14.0-canary.4e250cbc.0":"2020-03-17T21:23:31.251Z","0.14.0-canary.ff82d9ec.0":"2020-03-18T18:19:19.980Z","0.14.0-canary.f50f48ef.0":"2020-03-19T18:55:01.170Z","0.14.0-canary.134cf877.0":"2020-03-19T20:38:56.453Z","0.14.0":"2020-03-19T21:28:24.961Z","0.15.0-canary.2c1a4913.0":"2020-03-19T23:00:34.836Z","0.15.0-canary.3a6e481a.0":"2020-03-20T18:12:37.002Z","0.15.0-canary.603d6eb3.0":"2020-03-20T21:35:30.236Z","0.15.0-canary.05c6a93c.0":"2020-03-23T16:36:04.500Z","0.14.1":"2020-03-23T17:57:25.031Z","0.15.0-canary.4e6be3f4.0":"2020-03-24T20:58:24.267Z","0.15.0-canary.c29a683d.0":"2020-03-24T21:16:17.164Z","0.15.0-canary.fca3dd9d.0":"2020-03-24T23:42:48.102Z","0.15.0-canary.1e73da49.0":"2020-03-25T21:29:35.518Z","0.15.0-canary.bb6dfc5a.0":"2020-03-27T01:22:43.809Z","0.15.0-canary.1884603d.0":"2020-03-27T19:55:05.062Z","0.15.0-canary.aff73cab.0":"2020-03-27T21:13:58.911Z","0.15.0-canary.63168f61.0":"2020-03-31T18:12:03.851Z","0.15.0-canary.9fb79b3e.0":"2020-03-31T21:19:52.063Z","0.15.0-canary.9bd3e9e2.0":"2020-04-01T00:15:07.983Z","0.15.0-canary.072084ab.0":"2020-04-01T18:39:18.522Z","0.15.0-canary.4dec04af.0":"2020-04-03T20:29:19.835Z","0.15.0-canary.9b676354.0":"2020-04-03T20:29:33.421Z","0.15.0-canary.6b946095.0":"2020-04-03T21:23:46.188Z","0.15.0-canary.5ccbfaa2.0":"2020-04-03T21:29:13.434Z","0.15.0-canary.a0ab8772.0":"2020-04-07T20:08:29.654Z","0.15.0-canary.8d352305.0":"2020-04-07T21:41:28.318Z","0.15.0-canary.31eac79f.0":"2020-04-07T21:57:03.135Z","0.15.0-canary.ba05565e.0":"2020-04-08T17:32:07.447Z","0.15.0-canary.25099f79.0":"2020-04-08T21:30:20.359Z","0.15.0-canary.447e31c6.0":"2020-04-09T01:16:02.292Z","0.15.0-canary.d6dd84f7.0":"2020-04-09T01:24:41.674Z","0.15.0-canary.9b03ee68.0":"2020-04-09T20:02:27.011Z","0.15.0-canary.bbc25b10.0":"2020-04-10T22:45:04.462Z","0.15.0-canary.339cbfd4.0":"2020-04-15T17:38:18.518Z","0.15.0-canary.b74ff19f.0":"2020-04-15T20:03:46.799Z","0.15.0-canary.aaa16853.0":"2020-04-15T22:40:38.974Z","0.15.0-canary.826b23e7.0":"2020-04-16T18:56:31.046Z","0.15.0-canary.e1ad2b2f.0":"2020-04-17T23:01:00.998Z","0.15.0-canary.bade5580.0":"2020-04-17T23:18:52.251Z","0.15.0-canary.dae38247.0":"2020-04-18T00:15:49.095Z","0.15.0-canary.a04c0b82.0":"2020-04-18T00:33:57.376Z","0.15.0-canary.715decfe.0":"2020-04-20T18:34:53.556Z","0.15.0-canary.c862cd04.0":"2020-04-20T21:33:42.207Z","0.15.0-canary.e9b01b35.0":"2020-04-20T23:29:03.856Z","0.15.0-canary.ee7e8989.0":"2020-04-21T00:50:52.541Z","0.15.0-canary.9bf47ffa.0":"2020-04-21T18:37:27.858Z","0.15.0-canary.078dbd98.0":"2020-04-21T21:11:46.972Z","0.15.0-canary.953015d6.0":"2020-04-21T21:35:13.850Z","0.15.0-canary.c360ec63.0":"2020-04-21T21:58:30.256Z","0.15.0-canary.d71b65aa.0":"2020-04-21T22:37:19.280Z","0.15.0-canary.58d51135.0":"2020-04-23T00:44:28.227Z","0.15.0-canary.d0af8ba3.0":"2020-04-23T18:09:31.202Z","0.15.0-canary.8872b17b.0":"2020-04-23T20:40:37.373Z","0.15.0-canary.eca1a610.0":"2020-04-23T21:42:36.271Z","0.15.0-canary.baaf529e.0":"2020-04-23T22:43:47.798Z","0.15.0-canary.7a7992a8.0":"2020-04-23T23:13:43.437Z","0.15.0-canary.1150d64d.0":"2020-04-24T00:18:17.195Z","0.15.0-canary.dad3f828.0":"2020-04-25T00:42:21.293Z","0.15.0-canary.1bcdb47e.0":"2020-04-28T01:12:21.677Z","0.15.0-canary.86ff1b9f.0":"2020-04-28T02:55:18.353Z","0.15.0-canary.54a86b20.0":"2020-04-28T03:17:36.138Z","0.15.0-canary.938fd24b.0":"2020-04-30T01:26:50.229Z","0.15.0-canary.39e9a008.0":"2020-04-30T02:13:01.028Z","0.15.0-canary.f3b365de.0":"2020-04-30T08:26:46.272Z","0.15.0-canary.cdbdf807.0":"2020-05-01T00:14:20.137Z","0.15.0-canary.9995ae17.0":"2020-05-01T18:44:37.693Z","0.15.0-canary.457bf035.0":"2020-05-01T20:50:26.171Z","0.15.0-canary.2381fd02.0":"2020-05-01T21:25:02.304Z","0.15.0-canary.b2ca9b57.0":"2020-05-01T21:35:31.789Z","0.15.0-canary.b2b088e7.0":"2020-05-01T22:33:10.048Z","0.15.0-canary.fdd8f69e.0":"2020-05-02T00:16:07.269Z","0.15.0-canary.730f45a8.0":"2020-05-03T20:44:30.502Z","0.15.0-canary.4219bd20.0":"2020-05-04T23:31:30.737Z","0.15.0-canary.1d83cf6d.0":"2020-05-05T17:11:44.196Z","0.15.0-canary.3bfc63aa.0":"2020-05-05T18:13:19.267Z","0.15.0":"2020-05-05T22:36:03.403Z","0.16.0-canary.1f4e3d1c.0":"2020-05-06T22:04:00.742Z","0.16.0-canary.bc8759d5.0":"2020-05-07T23:14:16.147Z","0.16.0-canary.d1379acf.0":"2020-05-08T17:40:48.643Z","0.16.0-canary.58d51fc0.0":"2020-05-08T19:17:00.481Z","0.16.0-canary.588062d7.0":"2020-05-08T21:23:10.292Z","0.16.0-canary.fa21f639.0":"2020-05-11T17:29:33.452Z","0.16.0-canary.2772c509.0":"2020-05-11T18:36:15.038Z","0.16.0-canary.fc4796d5.0":"2020-05-11T20:04:30.697Z","0.16.0-canary.0d1c5f2c.0":"2020-05-11T21:19:20.874Z","0.16.0-canary.d083d93a.0":"2020-05-12T00:17:50.989Z","0.16.0-canary.c95d429c.0":"2020-05-12T21:36:28.040Z","0.16.0-canary.0c1ad726.0":"2020-05-13T00:33:48.684Z","0.16.0-canary.8b6a4700.0":"2020-05-13T17:18:45.622Z","0.16.0-canary.3270effb.0":"2020-05-13T21:24:12.438Z","0.16.0-canary.832e64f7.0":"2020-05-14T00:51:48.330Z","0.16.0-canary.472fc4fc.0":"2020-05-14T03:35:59.685Z","0.16.0-canary.4dcd7dd5.0":"2020-05-14T16:24:10.677Z","0.16.0-canary.bcd3400d.0":"2020-05-15T22:49:22.784Z","0.16.0-canary.91f63179.0":"2020-05-16T00:34:08.453Z","0.16.0-canary.b8aafb56.0":"2020-05-18T18:31:09.876Z","0.16.0-canary.a564b194.0":"2020-05-18T23:03:05.641Z","0.16.0-canary.ef56465b.0":"2020-05-19T03:47:26.995Z","0.16.0-canary.c22dcd71.0":"2020-05-19T17:23:51.240Z","0.16.0-canary.6eb62388.0":"2020-05-19T20:37:58.232Z","0.16.0-canary.9bc3230c.0":"2020-05-19T21:37:44.224Z","0.16.0-canary.421a6856.0":"2020-05-20T05:23:48.909Z","0.16.0-canary.761aa6f2.0":"2020-05-20T21:30:22.226Z","0.16.0-canary.f8654c40.0":"2020-05-20T21:39:59.733Z","0.16.0-canary.05f3853e.0":"2020-05-21T17:32:48.563Z","0.16.0-canary.5fe61f4e.0":"2020-05-21T23:06:20.439Z","0.16.0-canary.17d33745.0":"2020-05-26T16:13:20.563Z","0.16.0-canary.e8b52f5b.0":"2020-05-26T18:42:03.647Z","0.16.0-canary.09afa0a9.0":"2020-05-26T21:43:36.177Z","0.16.0-canary.58bc9166.0":"2020-05-27T00:29:48.890Z","0.16.0-canary.43bde144.0":"2020-05-27T18:28:48.238Z","0.16.0-canary.51067bbc.0":"2020-05-27T20:02:45.395Z","0.16.0-canary.92751ffa.0":"2020-05-27T21:36:05.155Z","0.16.0-canary.aa2b40bb.0":"2020-05-28T19:14:24.436Z","0.16.0-canary.1a870a01.0":"2020-05-28T21:18:10.509Z","0.16.0-canary.ad57d086.0":"2020-05-29T23:48:46.304Z","0.16.0-canary.3bf2b4d5.0":"2020-05-30T00:36:11.941Z","0.16.0-canary.ac05f090.0":"2020-05-30T02:49:24.437Z","0.16.0-canary.0ba7b095.0":"2020-05-30T02:56:06.540Z","0.16.0-canary.5eaa9bac.0":"2020-06-01T23:28:15.939Z","0.16.0-canary.5677ac20.0":"2020-06-01T23:56:37.908Z","0.16.0-canary.7ac6bff4.0":"2020-06-02T00:15:11.187Z","0.16.0-canary.d45622aa.0":"2020-06-02T23:45:24.399Z","0.16.0-canary.dc26c709.0":"2020-06-05T20:20:28.615Z","0.16.0-canary.b9baf6db.0":"2020-06-05T20:22:00.983Z","0.16.0-canary.e0b8c9d0.0":"2020-06-05T23:04:12.515Z","0.16.0-canary.51552859.0":"2020-06-10T00:07:37.174Z","0.16.0-canary.2e269285.0":"2020-06-10T01:35:12.634Z","0.16.0-canary.be138b01.0":"2020-06-10T20:48:41.038Z","0.16.0-canary.04bccf5a.0":"2020-06-16T00:57:30.109Z","0.16.0-canary.b44dea36.0":"2020-06-16T20:57:15.045Z","0.16.0-canary.e2577e87.0":"2020-06-16T21:08:15.458Z","0.16.0-canary.58b73343.0":"2020-06-16T21:23:19.501Z","0.16.0-canary.f155c058.0":"2020-06-18T18:07:28.988Z","0.16.0-canary.309779d2.0":"2020-06-18T23:58:06.781Z","0.16.0-canary.e7649968.0":"2020-06-19T21:40:20.089Z","0.16.0-canary.8e21c78b.0":"2020-06-22T10:37:19.458Z","0.16.0-canary.6db76faf.0":"2020-06-22T21:12:17.008Z","0.16.0-canary.c4dd9684.0":"2020-06-23T15:14:23.488Z","0.16.0-canary.b3e53981.0":"2020-06-24T00:38:37.406Z","0.16.0-canary.b9468f77.0":"2020-06-24T21:53:57.914Z","0.16.0-canary.eb790e49.0":"2020-06-25T21:18:28.068Z","0.16.0-canary.9aa1a5c5.0":"2020-06-26T17:04:46.454Z","0.16.0-canary.d36e9861.0":"2020-06-26T17:35:55.929Z","0.16.0-canary.155c2f85.0":"2020-06-26T23:28:32.830Z","0.16.0-canary.340c9c40.0":"2020-06-26T23:37:48.948Z","0.16.0-canary.a3384d2d.0":"2020-06-30T20:59:57.021Z","0.17.0-canary.6d056c96.0":"2020-06-30T21:09:22.415Z","0.16.1":"2020-06-30T21:14:38.398Z","0.17.0-canary.f7e37607.0":"2020-06-30T21:43:44.120Z","0.18.0-canary.0afbfef2.0":"2020-07-01T19:43:24.944Z","0.17.0":"2020-07-01T19:43:59.166Z","0.18.0-canary.fd970958.0":"2020-07-01T23:32:56.979Z","0.18.0-canary.fd44be19.0":"2020-07-02T05:48:03.397Z","0.17.2":"2020-07-02T05:58:10.023Z","0.18.0-canary.ca6fc6de.0":"2020-07-02T05:58:55.637Z","0.18.0-canary.79f1ec2a.0":"2020-07-07T17:32:04.172Z","0.18.0-canary.a7bc45ae.0":"2020-07-09T17:22:44.948Z","0.18.0-canary.b184bc1c.0":"2020-07-09T17:31:56.191Z","0.18.0-canary.b39fde62.0":"2020-07-09T17:37:08.533Z","0.18.0-canary.dfdd8d6c.0":"2020-07-09T18:25:21.473Z","0.18.0-canary.11cf2694.0":"2020-07-09T20:43:04.471Z","0.18.0-canary.436d66e9.0":"2020-07-09T20:47:51.496Z","0.18.0-canary.3a44d36b.0":"2020-07-10T00:36:55.781Z","0.18.0-canary.ec11ae6e.0":"2020-07-10T17:52:31.207Z","0.18.0-canary.17f6cf27.0":"2020-07-10T18:32:21.107Z","0.18.0-canary.efdfbc21.0":"2020-07-10T18:44:04.170Z","0.18.0-canary.bae4339a.0":"2020-07-14T16:41:16.811Z","0.18.0-canary.28eac13b.0":"2020-07-14T22:22:56.971Z","0.18.0-canary.44966b65.0":"2020-07-15T18:04:24.008Z","0.18.0-canary.3ef0ef60.0":"2020-07-16T16:54:04.205Z","0.18.0-canary.fcebf9e6.0":"2020-07-20T18:45:40.054Z","0.18.0-canary.b6a772df.0":"2020-07-20T22:46:02.161Z","0.18.0-canary.f6a6ca38.0":"2020-07-21T16:40:29.000Z","0.18.0-canary.647dd6b7.0":"2020-07-21T18:41:39.700Z","0.18.0-canary.3cb7406f.0":"2020-07-22T18:56:53.588Z","0.18.0-canary.5717a5a1.0":"2020-07-22T21:39:30.642Z","0.18.0-canary.d84cd4b2.0":"2020-07-22T21:41:26.183Z","0.18.0-canary.f279e7fc.0":"2020-07-22T22:00:15.876Z","0.18.0-canary.f181e3bc.0":"2020-07-22T22:02:17.274Z","0.18.0-canary.346a622a.0":"2020-07-22T23:39:34.709Z","0.18.0-canary.c9e8a848.0":"2020-07-23T01:09:53.449Z","0.18.0-canary.718c385c.0":"2020-07-23T20:05:56.241Z","0.18.0-canary.cd516a27.0":"2020-07-24T19:10:22.247Z","0.18.0-canary.1f082191.0":"2020-07-24T19:15:43.566Z","0.18.0-canary.ea3e82dc.0":"2020-07-24T19:20:56.972Z","0.18.0-canary.94987b64.0":"2020-07-24T20:26:04.866Z","0.18.0-canary.ff49b7e2.0":"2020-07-27T19:04:23.448Z","0.18.0-canary.3d334ccc.0":"2020-07-28T16:14:37.714Z","0.18.0-canary.82ac569e.0":"2020-07-28T18:41:58.671Z","0.18.0-canary.99df7397.0":"2020-07-29T02:39:59.345Z","0.18.0-canary.45493e05.0":"2020-07-29T17:16:11.156Z","0.18.0-canary.f2ab0a95.0":"2020-07-29T17:20:52.365Z","0.18.0-canary.45f9eddc.0":"2020-07-30T00:54:24.952Z","0.18.0-canary.b64663ea.0":"2020-07-30T17:42:47.016Z","0.18.0-canary.9a1a4d2d.0":"2020-07-30T21:03:44.691Z","0.18.0-canary.887c2848.0":"2020-07-30T22:05:08.158Z","0.18.0-canary.354eb695.0":"2020-07-30T23:57:25.390Z","0.18.0-canary.7beb236c.0":"2020-07-31T17:40:05.025Z","0.18.0-canary.c44acc0c.0":"2020-07-31T21:10:35.221Z","0.18.0-canary.779853ff.0":"2020-08-03T17:22:45.869Z","0.18.0-canary.8aaf270b.0":"2020-08-03T18:40:15.724Z","0.18.0-canary.5cde9f12.0":"2020-08-03T19:00:38.582Z","0.18.0-canary.1607ec53.0":"2020-08-03T19:46:11.478Z","0.18.0-canary.678b30e3.0":"2020-08-03T19:50:04.833Z","0.18.0-canary.21c55569.0":"2020-08-03T19:56:09.730Z","0.19.0-canary.907d4d7d.0":"2020-08-03T21:21:51.979Z","0.18.0":"2020-08-03T21:24:13.666Z","0.19.0-canary.f7958e4a.0":"2020-08-04T02:06:21.185Z","0.19.0-canary.f8ceaf79.0":"2020-08-04T19:17:36.358Z","0.19.0-canary.6b9e385a.0":"2020-08-04T21:29:16.615Z","0.19.0-canary.9a7e6d2a.0":"2020-08-05T03:45:28.231Z","0.19.0-canary.188f3f1c.0":"2020-08-05T18:12:51.458Z","0.19.0-canary.b6106add.0":"2020-08-05T20:48:53.668Z","0.19.0-canary.ebb4c667.0":"2020-08-06T00:18:18.358Z","0.19.0-canary.aa44289e.0":"2020-08-06T18:26:55.307Z","0.19.0-canary.e6b0816b.0":"2020-08-07T18:43:13.559Z","0.19.0-canary.96d15938.0":"2020-08-07T20:28:22.324Z","0.19.0-canary.9d991c8c.0":"2020-08-07T22:08:00.980Z","0.19.0-canary.13bfbd72.0":"2020-08-10T19:26:54.947Z","0.19.0-canary.30b1b258.0":"2020-08-10T20:06:24.458Z","0.19.0-canary.1583e263.0":"2020-08-11T23:10:14.707Z","0.19.0-canary.fefb1a93.0":"2020-08-12T00:24:41.744Z","0.19.0-canary.1ac5b9d4.0":"2020-08-12T18:26:52.223Z","0.19.0-canary.f17f5052.0":"2020-08-13T17:14:04.554Z","0.19.0-canary.80b5d20d.0":"2020-08-13T18:16:48.068Z","0.19.0-canary.758635ed.0":"2020-08-14T17:16:05.514Z","0.19.0-canary.18d6b808.0":"2020-08-14T23:07:37.127Z","0.19.0-canary.5f8ffbd1.0":"2020-08-17T22:15:00.826Z","0.19.0-canary.8604d59e.0":"2020-08-18T01:01:48.446Z","0.19.0-canary.1d7d5e34.0":"2020-08-18T01:08:32.491Z","0.19.0-canary.9cc95c07.0":"2020-08-18T01:16:06.578Z","0.19.0-canary.9f65ced3.0":"2020-08-18T20:15:35.524Z","0.19.0-canary.5962b365.0":"2020-08-19T20:28:15.169Z","0.19.0-canary.9c9ec756.0":"2020-08-20T18:55:24.414Z","0.19.0-canary.fa0ad66a.0":"2020-08-20T20:34:32.773Z","0.19.0-canary.06ecdd6b.0":"2020-08-20T21:33:31.247Z","0.19.0-canary.2bca2318.0":"2020-08-21T17:51:55.753Z","0.19.0-canary.6aa47265.0":"2020-08-21T18:15:38.734Z","0.19.0-canary.e7202a07.0":"2020-08-21T19:23:03.879Z","0.19.0-canary.f208201e.0":"2020-08-24T19:02:43.974Z","0.19.0-canary.14a172db.0":"2020-08-25T19:47:16.733Z","0.19.0-canary.e6c1038d.0":"2020-08-27T19:36:34.117Z","0.19.0-canary.34012082.0":"2020-08-27T19:47:37.734Z","0.19.0-canary.c073f7b8.0":"2020-08-28T17:11:45.309Z","0.19.0-canary.b7ae68ff.0":"2020-08-29T01:26:39.331Z","0.19.0-canary.697e3879.0":"2020-09-02T00:12:35.506Z","0.19.0-canary.eafb7991.0":"2020-09-02T02:17:46.635Z","0.19.0-canary.606642ec.0":"2020-09-02T21:35:02.873Z","0.19.0-canary.ddf05c42.0":"2020-09-03T13:52:35.852Z","0.19.0-canary.b889e6dc.0":"2020-09-03T14:10:41.400Z","0.19.0-canary.aabeceb0.0":"2020-09-03T19:57:01.491Z","0.19.0-canary.d8cca3a6.0":"2020-09-03T21:31:01.855Z","0.19.0-canary.26d34b2e.0":"2020-09-03T21:56:21.986Z","0.19.0-canary.a1c44494.0":"2020-09-09T22:06:45.074Z","0.19.0-canary.be1cd1e9.0":"2020-09-10T16:40:29.931Z","0.19.0-canary.f094c0ce.0":"2020-09-10T17:35:43.280Z","0.19.0-canary.c1261e7d.0":"2020-09-11T02:25:45.604Z","0.19.0-canary.9b39ed1e.0":"2020-09-11T02:26:41.483Z","0.19.0-canary.e67214b3.0":"2020-09-11T02:31:02.885Z","0.19.0-canary.36f5da28.0":"2020-09-11T02:33:40.920Z","0.19.0-canary.3babab12.0":"2020-09-11T02:36:28.595Z","0.19.0-canary.a4481e6f.0":"2020-09-11T02:48:47.681Z","0.19.0-canary.a9177836.0":"2020-09-11T17:46:57.701Z","0.19.0-canary.b102a3c8.0":"2020-09-14T20:12:49.437Z","0.19.0-canary.a7fbc707.0":"2020-09-15T16:05:01.954Z","0.19.0-canary.ed6b8660.0":"2020-09-15T17:24:22.207Z","0.19.0-canary.9c2331f5.0":"2020-09-15T17:48:48.332Z","0.19.0-canary.63a5f088.0":"2020-09-16T21:37:17.578Z","0.19.0-canary.b7995e49.0":"2020-09-16T23:26:06.273Z","0.19.0-canary.0da3ec97.0":"2020-09-21T22:08:09.962Z","0.19.0-canary.a0793c96.0":"2020-09-22T17:03:59.733Z","0.19.0-canary.06998a3e.0":"2020-09-22T18:25:16.568Z","0.19.0-canary.3484a90d.0":"2020-09-22T22:03:43.577Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:20:49.106Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:06:44.751Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:11:54.779Z","0.19.0-canary.347110f1.0":"2020-09-28T16:49:41.932Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:00:44.199Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:37:43.447Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:22:24.180Z","0.19.0-canary.615d861d.0":"2020-10-02T01:32:58.727Z","0.19.0-canary.af110e86.0":"2020-10-02T23:49:28.260Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:26:40.594Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:13:58.273Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:07:16.588Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:30:08.108Z","0.19.0":"2020-10-07T22:33:13.664Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:53:17.750Z","0.19.1":"2020-10-08T23:05:42.339Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:06:33.841Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:33:54.953Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:21:44.385Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:45:53.112Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:15:24.139Z","0.20.0-canary.3280b686.0":"2020-10-16T00:04:01.083Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:13:59.770Z","0.20.0-canary.4773c773.0":"2020-10-16T22:33:44.806Z","0.20.0-canary.65787913.0":"2020-10-19T18:50:32.369Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:23:48.111Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:23:20.977Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:20:37.186Z","0.20.0-canary.32961593.0":"2020-10-28T00:38:29.743Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:36:33.531Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:50:04.284Z","0.20.0-canary.124beb49.0":"2020-10-31T00:06:08.821Z","0.20.0-canary.5937f468.0":"2020-11-04T21:05:05.714Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:30:23.651Z","0.20.0-canary.184861ee.0":"2020-11-07T00:37:19.386Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:05:21.973Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:57:24.205Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:23:35.333Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:41:37.906Z","0.20.0-canary.2c553352.0":"2020-11-12T22:42:18.569Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:48:00.674Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:23:28.843Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:25:04.672Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:11:17.502Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:51:42.038Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:16:12.918Z","0.20.0-canary.761027ff.0":"2020-11-18T22:13:24.540Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:19:23.883Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:30:07.671Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:09:41.303Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:24:08.228Z","0.20.0-canary.72092360.0":"2020-11-24T04:17:43.698Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:47:54.971Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:04:44.542Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:26:40.311Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:55:18.240Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:15:54.321Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:06:39.029Z","0.20.0-canary.9755be10.0":"2020-12-03T19:24:49.777Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:49:14.251Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:25:24.235Z","0.20.0":"2020-12-03T22:28:39.161Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:56:23.971Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:03:19.547Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:53:32.351Z","0.21.0-canary.635c7996.0":"2020-12-17T23:31:12.703Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:48:09.369Z","0.21.0-canary.41f77000.0":"2020-12-18T00:34:39.747Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:39:16.000Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:02:13.354Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:49:04.561Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:53:43.608Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:07:35.767Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:03:28.845Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:44:56.266Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:54:26.271Z","0.21.0-canary.269eed01.0":"2021-01-13T21:44:44.339Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:06:20.865Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:04:02.690Z","0.21.0-canary.bc113605.0":"2021-01-14T00:44:50.160Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:08:44.430Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:07:00.451Z","0.21.0-canary.2899691d.0":"2021-01-16T01:44:05.189Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:20:50.981Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:51:46.661Z","0.21.0-canary.597ca1b6.0":"2021-01-20T00:59:22.161Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:00:57.604Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:37:08.682Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:36:11.052Z","0.21.0-canary.664a2927.0":"2021-01-21T19:18:04.727Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:47:03.376Z","0.21.0-canary.027365eb.0":"2021-01-22T21:06:59.473Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:25:59.060Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:32:19.442Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:51:25.410Z","0.21.0-canary.c8797192.0":"2021-01-23T00:06:48.089Z","0.21.0-canary.946f5563.0":"2021-01-23T00:42:55.994Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:39:31.518Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:05:46.672Z","0.21.0-canary.14e01610.0":"2021-01-27T19:50:56.876Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:16:38.473Z","0.21.0-canary.5a328336.0":"2021-01-28T19:54:08.821Z","0.21.0-canary.533b1251.0":"2021-01-29T15:11:06.261Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:16:56.162Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:03:07.530Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:33:25.070Z","0.21.0-canary.5160e548.0":"2021-02-05T23:50:48.346Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:18:05.934Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:50:32.421Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:43:52.163Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:28:26.410Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:42:33.217Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:47:51.809Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:24:19.543Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:17:34.338Z","0.21.0-canary.d84df029.0":"2021-02-16T19:07:10.315Z","0.21.0-canary.c525f471.0":"2021-02-17T20:52:58.975Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:13:25.764Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:37:17.774Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:01:47.380Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:18:46.580Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:14:15.826Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:09:43.065Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:00:40.342Z","0.21.0-canary.12574572.0":"2021-03-02T20:28:57.470Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:33:41.273Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:46:03.555Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:10:23.487Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:50:54.931Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:21:36.292Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:26:40.254Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:23:05.319Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:24:03.059Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:27:01.758Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:40:40.038Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:50:40.715Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:00:23.600Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:51:15.158Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:36:48.436Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:22:48.007Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:46:13.659Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:28:48.466Z","0.21.0-canary.0138863c.0":"2021-03-11T18:36:13.738Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:18:16.598Z","0.21.0-canary.520290a9.0":"2021-03-11T22:27:30.739Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:31:48.799Z","0.21.0-canary.4246c082.0":"2021-03-11T22:38:52.845Z","0.21.0-canary.2d736253.0":"2021-03-15T22:35:20.430Z","0.21.0-canary.7033124d.0":"2021-03-16T18:37:06.086Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:38:33.175Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:04:05.791Z","0.21.0-canary.572107b5.0":"2021-03-18T23:53:48.890Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:19:35.240Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:29:26.454Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:20:48.485Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:40:24.228Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:08:04.675Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:10:54.745Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:47:11.412Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:47:45.902Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:13:45.465Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:41:31.111Z","0.21.0-canary.852f873c.0":"2021-04-02T05:21:44.137Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:43:56.868Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:49:34.127Z","0.21.0-canary.583644a6.0":"2021-04-05T17:50:36.239Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:35:47.546Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:42:13.822Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:23:19.017Z","0.21.0-canary.e539904c.0":"2021-04-08T18:01:37.565Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:10:52.665Z","0.21.0-canary.e142c144.0":"2021-04-12T14:50:09.953Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:05:02.144Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:38:45.009Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:41:22.430Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:25:49.925Z","0.21.0-canary.ff79b092.0":"2021-04-15T18:59:23.662Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:09:54.359Z","0.21.0-canary.11977cac.0":"2021-04-16T00:57:37.797Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:50:33.796Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:46:11.107Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:52:41.364Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:08:58.242Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:18:52.931Z","0.21.0-canary.0875e898.0":"2021-04-30T21:26:58.853Z","0.21.0":"2021-04-30T23:58:02.714Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:04:48.792Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:33:42.321Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:33:10.126Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:10:11.501Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:36:30.210Z","0.22.0-canary.5813480a.0":"2021-05-05T18:24:52.058Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T17:58:39.896Z","0.22.0-canary.25693d60.0":"2021-05-07T21:55:27.585Z","0.22.0-canary.c497962b.0":"2021-05-07T22:19:24.881Z","0.22.0-canary.e300688e.0":"2021-05-07T22:23:50.390Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:28:43.611Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:33:59.422Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:34:06.942Z","0.22.0-canary.004aca62.0":"2021-05-11T18:05:45.279Z","0.22.0-canary.4af17446.0":"2021-05-11T18:45:34.043Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:51:09.580Z","0.22.0-canary.4021b2f9.0":"2021-05-12T22:00:01.249Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:16:57.010Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:02:54.935Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:08:46.609Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:57:53.243Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:49:25.152Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:58:00.092Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:31:34.208Z","0.22.0-canary.2212691a.0":"2021-05-17T23:52:11.709Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:21:56.182Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:20:30.565Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:39:43.680Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:50:29.647Z","0.22.0-canary.b401a081.0":"2021-05-21T23:22:29.046Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:15:59.541Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:02:13.842Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:01:42.015Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:11:50.854Z","0.22.0-canary.b9b0e330.0":"2021-05-25T20:59:55.066Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:04:58.011Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:13:36.901Z","0.22.0-canary.2e2c75f2.0":"2021-05-26T00:10:28.170Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:12:52.877Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:30:34.598Z","0.22.0-canary.227a4614.0":"2021-05-27T16:02:39.114Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:44:41.022Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:32:37.866Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:54:35.551Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:45:03.824Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:49:43.039Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:36:09.839Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:48:38.838Z","0.22.0-canary.e1511867.0":"2021-06-12T00:56:54.406Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:51:23.870Z","0.22.0-canary.573d8913.0":"2021-06-18T23:26:14.812Z","0.22.0-canary.21dba001.0":"2021-06-21T21:40:04.366Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:55:36.034Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:08:34.634Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:46:28.138Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:16:46.246Z","0.22.0-canary.73122cba.0":"2021-06-30T19:36:06.206Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:33:32.103Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:31:42.898Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:45:45.508Z","0.22.0-canary.d53edeb6.0":"2021-07-07T16:59:40.639Z","0.22.0-canary.2226489a.0":"2021-07-08T18:00:59.925Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:02:14.688Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:16:16.573Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:37:01.316Z","0.22.0-canary.cb42f5bd.0":"2021-07-13T18:19:21.838Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:41:35.366Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:18:09.282Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:26:05.407Z","0.22.0":"2021-07-14T22:31:53.879Z","0.22.1":"2021-07-14T22:52:45.164Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:53:33.031Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:39:05.252Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:03:10.491Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:22:07.804Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:03:32.680Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:08:13.952Z","0.23.0-canary.c180db74.0":"2021-07-16T17:24:32.743Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:56:46.094Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:07:21.495Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:11:37.811Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:06:04.735Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:53:35.289Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:06:58.193Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:50:05.295Z","0.23.0-canary.104debd5.0":"2021-07-19T22:53:05.802Z","0.23.0-canary.4612705d.0":"2021-07-20T16:04:11.756Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:34:05.315Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:52:27.516Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:52:28.740Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:15:35.566Z","0.23.0-canary.e0693475.0":"2021-07-23T18:55:43.608Z","0.23.0-canary.d595e030.0":"2021-07-23T20:52:45.964Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:56:21.552Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:24:22.382Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:43:39.556Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:52:40.735Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:21:52.969Z","0.23.0-canary.ab310900.0":"2021-07-28T20:20:58.577Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:25:40.841Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:31:12.817Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:13:17.369Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:47:21.886Z","0.23.0-canary.21918905.0":"2021-08-03T21:14:01.183Z","0.23.0-canary.193c87be.0":"2021-08-04T18:07:10.631Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:10:28.212Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:47:01.337Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:48:24.686Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:10:00.749Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:03:25.048Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:46:33.647Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:21:16.274Z","0.23.0-canary.3f47ae57.0":"2021-08-12T17:59:37.822Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:23:49.094Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:16:34.280Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:37:57.803Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:22:54.701Z","0.23.0-canary.dbb8b366.0":"2021-08-19T22:59:58.559Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:01:50.819Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:26:51.616Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:55:52.125Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:21:05.375Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:25:46.653Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:42:16.524Z","0.23.0-canary.6db58716.0":"2021-08-23T09:07:23.230Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:49:46.541Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:49:24.402Z","0.23.0-canary.756208fb.0":"2021-08-25T19:50:13.645Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:43:36.863Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:25:48.769Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:44:30.081Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:07:20.425Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:28:26.660Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:28:19.798Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:31:08.946Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:18:31.347Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:25:05.969Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:26:21.058Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:15:44.028Z","0.23.0-canary.4962a163.0":"2021-09-07T23:53:00.314Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:13:07.623Z","0.23.0-canary.76c68381.0":"2021-09-08T20:13:20.858Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:25:57.699Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:32:30.742Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:20:16.249Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:25:53.989Z","0.23.0":"2021-09-13T21:35:40.743Z","0.24.0-canary.9830d665.0":"2021-09-13T21:36:43.070Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:31:46.019Z","0.24.0-canary.583613a9.0":"2021-09-14T16:54:50.757Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:31:49.392Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:35:26.146Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:12:46.938Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:44:21.846Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:08:10.823Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:31:47.339Z","0.24.0-canary.a7132082.0":"2021-09-15T21:45:15.040Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:45:11.418Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:38:50.789Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:08:27.793Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:51:53.818Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:54:38.446Z","0.24.0-canary.569d739f.0":"2021-09-20T21:23:22.978Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:00:20.855Z","0.26.0-canary.6be1a13e.0":"2021-09-21T02:52:47.403Z","0.25.0":"2021-09-21T02:53:00.061Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:11:55.101Z","0.25.1":"2021-09-21T03:12:38.681Z","0.26.0-canary.ae060177.0":"2021-09-21T14:37:50.320Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:15:59.993Z","0.26.0-canary.07e91417.0":"2021-09-22T21:05:28.478Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:27:19.604Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:30:50.354Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:31:06.023Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:41:14.913Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:50:34.297Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:05:31.857Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:33:36.735Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:07:59.181Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:33:16.466Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:56:59.239Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:14:05.495Z","0.25.2":"2021-10-11T23:18:29.425Z","0.26.0-canary.406d6fe1.0":"2021-10-13T20:59:10.594Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:36:35.603Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:23:21.525Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:32:13.024Z","0.25.3":"2021-10-21T17:55:38.318Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:17:05.606Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:44:38.157Z","0.26.0-canary.232327ee.0":"2021-11-01T20:15:28.838Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:00:08.864Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:07:33.798Z","0.26.0-canary.f3e28323.0":"2021-11-02T18:59:12.589Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:44:42.287Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:03:45.946Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:07:38.775Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:22:10.564Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:09:40.867Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:35:33.267Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:05:13.750Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:06:26.796Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:45:11.193Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:26:26.539Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:22:24.086Z","0.26.0-canary.893fc857.0":"2022-01-07T18:53:16.011Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:23:18.676Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:04:36.223Z","0.26.0":"2022-05-03T17:30:28.959Z","0.26.1":"2022-05-09T20:31:46.121Z","0.27.0":"2022-08-12T19:12:00.603Z"},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"aomarks@gmail.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"brian.t.vann@gmail.com","name":"taylorv"},{"email":"hi@yef.im","name":"yefim"}],"description":"Material Design drawer web component","homepage":"https://github.com/material-components/material-components-web-components#readme","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/drawer"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"license":"Apache-2.0","readme":"# `<mwc-drawer>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-drawer.svg)](https://www.npmjs.com/package/@material/mwc-drawer)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nThe Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n[Material Design Guidelines: Navigation Drawer](https://material.io/components/navigation-drawer/)\n\n[Demo](https://material-components.github.io/material-web/demos/drawer/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-drawer\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/drawer/images/standard_no_header.png\" width=\"552px\">\n\n```html\n<mwc-drawer>\n    <div>\n        <p>Drawer Content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n__NOTE:__ When using an inline-drawer (i.e. non-modal drawer) with a\n[`top-app-bar`](https://github.com/material-components/material-web/tree/master/packages/top-app-bar),\nthe app-bar is shifted to the right unlike the body content since its position\nis fixed. This may cause issues with action items on the `top-app-bar` to be\nshifted off screen. To remedy this, you should readjust the size of the\n`top-app-bar` based on the width of the drawer when the drawer is open. Here is\nan example of how to do this:\n\n```css\nmwc-drawer[open] top-app-bar {\n  /* Default width of drawer is 256px. See CSS Custom Properties below */\n  --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));\n}\n```\n\n### Standard with Header\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/drawer/images/standard.png\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader>\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n```\n\n### Dismissible\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/drawer/images/dismissible.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"dismissible\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n### Modal\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/drawer/images/modal.gif\" width=\"552px\">\n\n```html\n<mwc-drawer hasHeader type=\"modal\">\n    <span slot=\"title\">Drawer Title</span>\n    <span slot=\"subtitle\">subtitle</span>\n    <div>\n        <p>Drawer content!</p>\n        <mwc-icon-button icon=\"gesture\"></mwc-icon-button>\n        <mwc-icon-button icon=\"gavel\"></mwc-icon-button>\n    </div>\n    <div slot=\"appContent\">\n        <mwc-top-app-bar>\n            <mwc-icon-button slot=\"navigationIcon\" icon=\"menu\"></mwc-icon-button>\n            <div slot=\"title\">Title</div>\n        </mwc-top-app-bar>\n        <div>\n            <p>Main Content!</p>\n        </div>\n    </div>\n</mwc-drawer>\n<script>\n    const drawer = document.getElementsByTagName('mwc-drawer')[0];\n    if (drawer) {\n        const container = drawer.parentNode;\n        container.addEventListener('MDCTopAppBar:nav', () => {\n            drawer.open = !drawer.open;\n        });\n    }\n</script>\n```\n\n## API\n\n### Slots\nName | Description\n---- | -----------\n`title` | Header title to display in the drawer when `hasHeader` is true.\n`subtitle` | Header subtitle to display in the drawer when `hasHeader` is true.\n`header` | Additional header elements to display in the drawer.\n`appContent` | Elements to display in the \"app content\" to the right of, or under, the drawer.\n*default* | Elements to display under the header in drawer.\n\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`open` | `boolean` | `false` | Whether the dialog is open\n`hasHeader` | `boolean` | `false` | When `true`, displays the `title`, `subtitle`, and `header` slots.\n`type` | `string` | `''` | When set to `'dismissible'`, overlays the drawer on the content. When set to `'modal'`, also adds a scrim when the drawer is open. When set to empty string, it is inlined with the page and displaces app content.\n\n### Methods\n*None*\n\n### Events\n\nName | Detail | Description\n---- | ------ | -----------\n`MDCDrawer:opened` | `{}` | Fired when the drawer opens.\n`MDCDrawer:closed` | `{}` | Fired when the drawer closes.\n\n### CSS Custom Properties\n\n| Name                 | Default   | Description\n| -------------------- | --------- | -----------\n| `--mdc-drawer-width` | `256px`   | Width of the side drawer when opened.\n\n### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Detail | Description\n|---- | ------ | -----------\n| `--mdc-theme-surface`                    | The background color of the drawer.\n| `--mdc-typography-headline6-<PROPERTY>`  | Styles the typography of the drawer's title.\n| `--mdc-typography-body2-<PROPERTY>`      | Styles the typography of the drawer's subtitle.\n| `--mdc-typography-subtitle2-<PROPERTY>`  | Styles the typography of the drawer's list items.\n\n### Additional References\n\n-   [MDC Web Drawers](https://material.io/develop/web/components/drawers/)\n","readmeFilename":"README.md","keywords":["material design","web components","drawer"]}